Question

我正在处理我的第一个Angular.js应用程序，我有点困惑。目前我有两个指令，它们都需要相同的数据来构建页面。此数据从外部API加载。

现在我已经创建了这个factory，它看起来像是：

(function() {
    var app = angular.module('dataService', []);
    app.factory('dataService', ['$http', function($http) {
        var links = [];

        return {
            getMenu: function() {
                if(links.length > 0) {
                    return links;
                } else {
                    $http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
                        return data;
                    })
                }
            }
        }
    }])
})();

但我对如何使用此服务感到困惑，显然如果有$http请求，则永远不会使用正确的数据调用返回。

在我的指令中，我会这样使用它：

(function() {
    // Menu directive
    var app = angular.module('menu', ['dataService']);
    app.directive('menu', ['dataService', function(dataService) {
        return {
            restrict: 'E',
            templateUrl: 'scripts/menu/menu.html',
            controller: function() {
                console.log(dataService.getMenu()); // Return 'undefined'
            },
            controllerAs: 'menuCtrl'
        }
    }])
})();

Answer 1

更改您的服务方法，以便它处理同步和异步方案：

  getMenu: function() {
                 var deferred = $q.defer();
                if(links.length > 0) {
                   deferred.resolve(links);
                } else {
                    $http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
                   deferred.resolve(data);
                    })
                }
           return deferred.promise;
   }

用法：

dataService.getMenu().then(function(data){
  console.log(data);
});

Angular.js在指令之间共享服务数据

1 个答案: