2016-08-25 5 views
0

角度UIにかなり新しい。これは何を私の小さなモックアップです角度UIルータ - 子ビューでui-srefを使用して親ビューを変更する

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <div ng-app="app"> 
     <h1>Hello</h1> 
     <ul> 
      <li> 
       <a ui-sref="organisations">Click 1</a>  
      </li> 
     </ul> 

     <div ui-view="testview"></div> 
    </div> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
<script> 
    angular 
     .module('app', ['ui.router']) 
     .config(setViewStates) 
    ; 

    function setViewStates($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 

     $stateProvider 
      // Organisations 
      .state('organisations', { 
       url: '/', 
       views: { 
        'testview': { 
         template: '<p>view 1</p><a ui-sref="organisations.club">Click</a>', 
        }, 
       } 
      }) 
      .state('organisations.club', { 
       url: '/club', 
       views: { 
        '[email protected]': { 
         template: '<p>view 2</p>', 
         controller: function($scope) { 
          console.log('hello'); 
         } 
        }, 
       } 
      }); 
     ; 
    } 
</script> 

</html> 

:私は子供に親のUIビューを変更しますSREF

を持っているタグを持つUIビューを持っているために、このような何かをしようとしています最終的にやりたいのは、アイテムのテーブルを持つテンプレートを持っていて、それらのアイテムの1つを押すと、テーブルテンプレートはそのアイテムの詳細とその状態に置き換えられますとURL。

だから、階層のようなものです:あなたがIDとしてのparamsで一つだけの状態を持っている場合、あなたが新規またはいずれかとしてIDを送信することができますclubId

答えて

1
.state('organisations', { 
      url: '/:id', 
      views: { 
       'testview': { 
        template: '<p>view 1</p><a ui-sref="organisations({id : id_of_this_file})">Click</a>', 
       }, 
      } 
     }) 


/クラブ/リスト
/クラブ/他のキーワードを最初に使用し、idを 'new'またはファイルIDとして受け取るかどうかでng-ifでhtmlを操作します。あなたが新しいidパラメータを受け取った場合は、適切なIDを受け取った場合はテーブルを表示し、ファイルデータを表示します。

関連する問題