ui-routerを使用して状態間でスコープ値を共有する方法

Question

ng-initで関数を呼び出し、ng -repeatでその値を使用する配列に値を格納しています。同じコントローラ内のいくつかの状態でその配列を使用できますか？異なるコントローラ。

私は

app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) 
     { 
      $rootScope.$state = $state;  
      $rootScope.$stateParams = $stateParams;  
     } 
]); 

が見つかりましたが、私は$ rootScope.arr = []を使用している場合、それは

が動作していません。ステート間で使用可能ですが、$ scopeでは使用できません。

Answer 1

ルータでparamsを使用する必要があります。これにより、2つ（またはそれ以上）の状態間で情報を渡すことができます。例えばUI-ルータの使用を想定すると、あなたはURL文字列内のパラメータに沿って渡すために、このような状態を設定したい：

state('state-one', { 
    url: '/new?itemId', 
    templateUrl: 'index-one.html' 
}) 

あなたは状態にこれを追加することで、あなたのコントローラでその変数にアクセスする（または代わりにすることができます、）完全に別個のコントローラファイルを持っている：

controller: function($scope, $stateParams) { 
    $scope.itemId = $stateParams.itemId; 
} 

2つの状態の間で移動し、テンプレートに沿ってその情報を渡す：

<a ui-sref="state-one({ itemId: 1 })">State One</a> 

同様あなたもでき使用可能なパラメータを持っている状態を設定し、それらの情報に沿って渡す：

state('state-two', { 
    url: '/two', 
    templateUrl: 'index-two.html', 
    params: { 
    itemId: null, 
    itemObject: null 
    } 
}) 

テンプレートのリンクを使用することなく、状態間を移動するには：これは働くだろう、あなたの場合は

$state.go('state-two', { itemId: vm.someId, itemObject: { some: object } }); 

を：

state('state-three', { 
    url: '/three', 
    templateUrl: 'index-three.html', 
    params: { 
    array: null 
    }, 
    controllerAs: 'vm' 
}) 

state-twoのコントローラ（たとえば）はstate-threeに移動し、state-threeの配列を保存して使用します。

$state.go('state-three', { array: $scope.myArray }) 

これは、$ scope.myArrayが状態2のコントローラの配列に割り当てられていることを前提としています。あなたはparamsの値として 'array'を使用していますので、state-threeのコントローラで再度アクセスすると、$ stateParams.arrayのロジックが実行されます。そのコントローラにあるコントローラ（state-

<div ng-repeat="item in vm.myArray"> 

Answer 2

がであなたのHTMLテンプレートの状態を定義します。

$scope.myArray = $stateParams.array; 

あなたはNGリピートでこれを使用している場合（「VM」は、コントローラの$スコープ）である：3のは）のように、使用することができますアプリ。このようなJS：あなたのコントローラ-1で

<div class="list" ng-repeat="item in array"> 
    <p>{{item.title}}</p> 
    <p>{{item.id}}</p> 
    <button ng-click = pass(array)>Click Me</button> 
</div> 

あなたのHTMLテンプレートで

.state('booklist',{ 
      url:'/booklist/:array',  //eg- I am passing id and title 
      views:{ 
      'menuContent':{ 
      templateUrl:'templates/booklist.html', 
      controller:'BooklistCtrl'     
      } 
      } 
      }) 

、お使いのコントローラ-2で

$scope.pass = function(data){ 
      $state.go('booklist',{array:name}); 
    } 

、

$scope.arr = $stateParams.array; 

更新

要素の配列でこれを行うにはどのようにあなたの配列

//example 
controller('ExampleCtrl',function($scope){ 

function loadData(){ 
    //you get your data here..after this 
    $scope.data = []; 
    for(var i =0 ; i<5; i++){ 
     $scope.data.push({}); //data stored in your array 
    } 
}; 

loadData(); //call the above function, no need to use ng-init 

//pass $scope.data array in to another controller 

})