2

私は次のように見ています（簡潔にするために短縮されています）： 

<ul class="nav nav-tabs nav-stacked">
    <li ng-repeat="i in range">
        <a id="list{{i}}" ng-click="ShowList(i)">
            List Item {{i}}
        </a>
    </li>
</ul>

<ng-switch on="listItemType">
    <div ng-switch-when="1">
        <form-a></form-a>
    </div>
    <div ng-switch-when="2">
        <form-b></form-b>
    </div>
    <div ng-switch-when="3">
        <form-c></form-c>
    </div>
</ng-switch>

<form-a>, <form-b>, <form-c>templateUrlをロードし、独自のコントローラーを持つ角度ディレクティブです。

上記のビューのコントローラーは次のとおりです。 

var listCount;
var listIds = [];
$http.get('/api/lists').
    success(function(data) {
        $scope.lists = data.lists;

        for (listCount = 1; listCount <= $scope.lists.length; listCount++) {
            listIds.push(listCount);
        }

        $scope.range = listIds;
    });
$scope.ShowList = function(listNumber) {
    $scope.listItemType = $scope.lists[listNumber - 1].listType;
};

ご覧のとおり、このコントローラーは$ http.get（）を使用して一部のデータをフェッチします。
さて、コントローラーは<form-a>いくつかのデータを投稿します。これにより、上記のコントローラーがフェッチしたのと同じデータが更新されます。<li>つまり、ビューの先頭にあるタグに新しいエントリが必要です。

ただし、ページのコントローラーはすでに$ http.get（）リクエストを実行しています。最初のコントローラーのリスト情報が更新されるように、データを再度取得するように依頼するにはどうすればよいですか？つまり、データが変更された場合、最初のコントローラーに、データを再度$ http.get（）するために使用できるイベントハンドラーがありますか？
ページが更新または再ロードされないため、上記のコードを使用したコントローラーは$ http.get（）を1回だけ呼び出し、同じページのディレクティブのコントローラーがデータを更新する場合、最初のコントローラーがそのデータを更新します。

4

1 に答える 1

2

その$get呼び出しを関数でラップして、もう一度呼び出します。

私たちはおそらくあなたが行っていることをもっと見る必要があるでしょう...しかしこれを考慮してください：

function ParentCtrl($scope, $http) {
   $scope.foo = [];

   $scope.loadFoo = function () {
       $http.get('/foo/data')
            .success(function(data) {
               $scope.foo = data;
            });
   };

   $scope.loadFoo();
}

function ChildCtrl($scope) {
   $scope.loadFoo(); //still here from Parent scope.
}

ただし、ディレクティブを使用しているため、スコープを分離した場合は、loadFoo（）メソッドへの参照を渡す必要があるため、質問に答えるのに十分な情報を提供していませんでした。

app.directive('testDir', function (){
   return {
     restrict: 'E',
     scope: {
       'loadFoo': '&'
     },
     link: function(scope) {
       scope.loadFoo();
     }
   }
});

として使用される：

<test-dir load-foo="loadFoo()"></test-dir>
于 2013-02-27T19:54:31.463 に答える