0

次のようなコントローラーがあります。

function MyCtrl($scope) {

  $scope.doSomething = function(){
    alert("Do something!");
  }

}

そして、これに依存する複数のビューがあります(つまり、以下の複数):

  <div ng-controller="MyCtrl">
    ...
  </div>

問題は、コントローラーが依存するデータをバックグラウンドでロードする必要があり (コントローラーはそのデータをロードしない)、データの準備が整った後にコールバック (dataIsReady()) が呼び出されることです。

function dataIsReady(){
  // TODO: call the doSomething() function
}

ここで、基本的に、MyCtrl 内にある doSomething() 関数を dataIsReady() 関数から呼び出したいと思います。どうやってやるの？

4

2 に答える 2

4

必要なのは、コントローラーに挿入できるデータ サービスだと思います。データの取得を処理し、データがロードされたときにコールバック関数をトリガーするために使用できる「promise」を返すデータ サービスで関数を呼び出すことができます。次のコードを見てください。egghead.io からわずかに変更されたバージョンです。

Plunker デモ (ローカル ストレージ付き): http://plnkr.co/edit/9w2jTg?p=preview

var myApp = angular.module('myApp', []);

myApp.factory('AvengersService', function ($http) {

    var AvengersService = {
        getAsyncCast: function () {           
            // $http returns a promise, which has a then function, which also returns a promise
            var promise = $http.get("avengers.json") // or some JSON service
                .then(function (response) {
                   // The 'then' function here is an opportunity to modify the response
                   // The return value gets picked up by the 'then' in the controller.
                   return response.data;
            });
            // Return the promise to the controller
            return promise;
        }
    };

    return AvengersService;
});

myApp.controller('AvengersCtrl', function($scope, AvengersService) {
    // Call the async method and then do something when the data is retrieved
    AvengersService.getAsyncCast()
        .then(function (asyncData) {
            // Callback logic that depends on the data goes in here
            console.info("Cast pulled async.");
            $scope.avengers.cast = asyncData;
        });              

});

それが役立つことを願っています。

于 2013-05-16T01:45:11.393 に答える
2

注意:この回答のこのアプローチはひどく間違っています。角度の外側、またはコントローラーの外側のコントローラーのスコープにアクセスするべきではありません。何度か呼び出そうとすると、これも非常に遅くなります。それ以外は問題ありません。それが最も簡単な方法でもあるので、私はこの答えを出しています。ただし、そのようなコードを本番環境で使用することは決してありません。適切な方法は、コントローラーと通信するサービスを作成することです。

$scope.doSomethingで定義したと仮定すると、次のようになりMyCtrlます。

var scp = angular.element('[ng-controller="MyCtrl"]').scope();
scp.doSomething();

doSomethingコントローラーで定義されたメソッドを呼び出します。

于 2013-05-16T05:45:13.363 に答える