3

チェックリストを表示し、選択内容を配列に保存するコントローラーが 1 つあります。

私の他のコントローラーは$http.get、最初のコントローラーからアレイ上で実行されます。

$watch配列が変更されるたびに新しい HTTP GET 要求が送信されるように設定するにはどうすればよいですか?

私の試み: http://plnkr.co/edit/EaCbnKrBQdEe4Nhppdfa

// See plnkr for other controller + FooSelection factory + view
function SimpleQueryResCtrl($scope, $http, FooSelection) {
    $scope.foo_list_selection = FooSelection;

    $scope.$watch('foo_list_selection', function (newValue, oldValue) {
        if (newValue !== oldValue)
            $http.get('/api/' + $scope.foo_list_selection).success(function (largeLoad) {
                $scope.myData = largeLoad;
            });
    });
}

SimpleQueryResCtrl.$inject = ['$scope', '$http', 'FooSelection'];
4

3 に答える 3

3

デフォルトでは、a$watchは参照への変更をチェックしますが、等しいかどうかはチェックしません。オブジェクトと配列は変更されても同じ参照を保持しているため、監視はトリガーされません。機能させるには、少なくとも 2 つのオプションがあります。

通知したい唯一の変更が配列のサイズを変更する場合 (要素の追加または削除と要素の内容の変更)、代わりに次のように配列の length プロパティにウォッチを設定できます。

$scope.$watch('foo_list_selection.length', function (newValue, oldValue) {
// ...

それ以外の場合は、ブール値を期待するオプションの$watch引数を使用できます。objectEqualityこれは、参照チェックではなく等価チェックを行います。

$scope.$watch('foo_list_selection', function (newValue, oldValue) {
    if (newValue !== oldValue)
        $http.get('/api/' + $scope.foo_list_selection).success(function (largeLoad) {
        $scope.myData = largeLoad;
    });
}, true);  // <- put `true` here

これはデフォルトの動作ではありません。これは、すべての要素のよりコストのかかる詳細なチェックを実行するため、必要な場合にのみ使用してください。

于 2013-06-02T17:30:22.270 に答える
1

そのロジックの一部をファクトリに移動し、それをすべてのコントローラーに送信すると$rootScope.$broadcast、情報が正しい場所に取得されます。

配列の作成をファクトリに移動し、そこから $broadcast を使用しました。

myApp.factory('FooSelection', function ($rootScope) {
var tempArr = [];
var fixArray = function(item){
  if (tempArr.indexOf(item) === -1){
    tempArr.push(item);
  } else {
    tempArr.splice(tempArr.lastIndexOf(item), 1);
  }
  $rootScope.$broadcast('newArray', tempArr);

}

return {fixArray: fixArray}
})

コントローラーで使用$scope.$onすると、変更時に新しいデータを受け取ります。

function SimpleQueryResCtrl($scope, $http, FooSelection) {
$scope.foo_list_selection = FooSelection;

$scope.$on('newArray', function(evt, message){
  console.log(message) // and you can put your $get method here
})
}

これがプランクです

于 2013-06-02T18:36:22.070 に答える
0

そのような場合は、コントローラーと UI の同期を維持するために、データ操作とメッセージのサービスを使用することをお勧めします。

こちらをご覧ください: AngularJS 複数の Controller と rootScope の使用

于 2013-06-03T06:27:12.307 に答える