Question

我有从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
        }
    }
});

它工作正常，但我担心使用范围。$ apply在模块中。

以下是示例http://jsfiddle.net/mfbFs/

可以改进吗？

Answer 1

为什么你使用jQuery的ajax，当Angular附带它并具有内置的承诺？

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

更简单！并且无需担心摘要 - 您的控制器已经确保在应该的时候发生。

Answer 2

在调用API之前，您无需设置$scope，只需在服务上注入$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();   
}

AngularJs。在模块中使用延迟

2 个答案: