1

APIからデータを取得するカスタムモジュールがあります。それは非同期なので、遅延を使用します。

angular.module('module', []).factory('api', function($q){
    var $scope;
    return {
        setScope: function(scope){ $scope = scope; },
        getPic:function(){
            var def = $q.defer();
            $.ajax({
                url: 'https://graph.facebook.com/shaverm/picture?redirect=false',
                dataType: 'jsonp',
                success: function(r){
                    def.resolve(r.data.url);
                    $scope.$apply();
                },
            });
            return def.promise
        }
    }
});

正常に動作しますが、モジュールで scope.$apply を使用することについて心配しています。

ここに例がありますhttp://jsfiddle.net/mfbFs/

改善できますか？

4

2 に答える 2

2

Angular には jQuery の ajax が付属しており、promise が組み込まれているのに、なぜ jQuery の ajax を使用しているのですか?

angular.module('module', []).factory('api', function($http){
  return {
    getPic: function(){
      return $http.jsonp('https://graph.facebook.com/shaverm/picture?redirect=false&callback=JSONP_CALLBACK');
    }
  };
});

はるかに簡単です！また、ダイジェストについて心配する必要はありません。コントローラーは、必要なときにダイジェストが発生することを既に保証しています。

于 2013-01-27T22:51:02.090 に答える
1

$scopeAPI を呼び出す前にを設定する必要はありません。次のよう$rootScopeに、サービスに を注入し、そのスコープで$apply()(または) を呼び出すだけです。$digest()

angular.module('module', []).factory('api', function($q, $rootScope){
    return {           
        getPic:function(){
            var def = $q.defer();
            $.ajax({
                url: 'https://graph.facebook.com/shaverm/picture?redirect=false',
                dataType: 'jsonp',
                success: function(r){
                    def.resolve(r.data.url);
                    $rootScope.$apply();
                },
            });
            return def.promise
        }
    }
});
function demoCtrl ($scope, api){         
     $scope.url = api.getPic();   
}
于 2013-01-27T22:48:21.120 に答える