Service AngularJS ng使用来自服务的数据重复

最初在我的应用程序中，我使用非常基本的$http调用创建控制器，通过从url（$routeParams）获取对象ID来获取资源。Ng重复正确显示结果

然而，我注意到在稍后的视图中刷新（不同的控制器）会删除数据并破坏页面。因此，我在服务上创建了一个用于多个控制器的函数，以检查数据是否可用，并做出如下反应：

1） 如果资源已定义，则返回它（无API调用） 2） 如果未定义资源，则从url获取id并从API获取 3） 如果资源没有定义&您无法获取ID，只需返回false

但是，这破坏了代码：在服务返回数据之前呈现的模板，ng repeat没有更新。代码如下所示：

angular.module('myApp', ['ngCookies'])
    .config(...)
    .service('myService', ['$cookies', '$http', function($cookies, $http) {
        myData = {};

        return {
            getData:function(dataID) {
                if(myData.name) {return myData);
                else if (dataID && dataID !== '') {
                    $http.get('/api/data/' + dataID)
                        .success(function(data) {
                            myData = data.object;
                            $cookies.dataID = data.object.id;
                            return myData;
                        }
                }
                else { return false; }
            }
        }
    }]);

function myCtrl($scope, $http, $routeParams, myService) {
    $scope.data = myService.getData($routeParams.dataID);

    ...
}

getData:function(dataID) {
    var deferred = $q.defer();
    if(myData.name) {
       deferred.resolve(myData);
    } else if (dataID && dataID !== '') {
        $http.get('/api/data/' + dataID)
            .success(function(data) {
                 myData = data.object;
                 $cookies.dataID = data.object.id;
                 deferred.resolve(myData);
                 // update angular's scopes
                 $rootScope.$$phase || $rootScope.$apply();
             });
    } else { 
       deferred.reject();
    }

    return deferred.promise;
}

这是模板。它在jade中，这意味着不用尖括号，只需在括号后面列出元素和参数，并在括号后面列出内容

h2 My heading
ul
    li(ng-repeat='option in data')
        a(href="#", ng-click='someFuncInCtrl(option.name)')  {{ option.name }}

当控制器自己执行$http.get时，ng repeat工作正常，因为$scope在“.success”回调中被更新。现在有一个服务在稍微延迟后返回数据，“$scope.data”只是未定义，ng repeat列表是空的

在返回“return myData”之前，我使用console.log检查了myData，myData正在工作，只是没有及时返回，无论出于什么原因，$scope获得数据时，列表都不会更新

我用$routeProvider的决心看了看。。。但这使得从url获取ID变得很困难，因为resolve对象似乎没有访问$routeParams的权限。我知道$scope.$apply应该在被外部函数更改时帮助更新作用域。。。但我不知道该把它放在哪里。on没有使用服务

我试过：

$scope.$apply($scope.data = myService.getData($routeParams.dataID));

及

---

两次我都只收到错误：$digest已经在进行中。

问题在于您与服务的交互方式。由于

getData

函数可以同时返回同步和/或异步信息，因此不能只使用普通的

返回

上面代码段中的

返回

不会从

getData

返回任何内容，因为它将在

$http.get

成功回调的上下文中执行（而不是在

getData

调用堆栈上）

处理同步和异步服务请求的最佳方法是使用

您的

getData

函数应该如下所示：

angular.module('myApp', ['ngCookies'])
    .config(...)
    .service('myService', ['$cookies', '$http', function($cookies, $http) {
        myData = {};

        return {
            getData:function(dataID) {
                if(myData.name) {return myData);
                else if (dataID && dataID !== '') {
                    $http.get('/api/data/' + dataID)
                        .success(function(data) {
                            myData = data.object;
                            $cookies.dataID = data.object.id;
                            return myData;
                        }
                }
                else { return false; }
            }
        }
    }]);

function myCtrl($scope, $http, $routeParams, myService) {
    $scope.data = myService.getData($routeParams.dataID);

    ...
}

getData:function(dataID) {
    var deferred = $q.defer();
    if(myData.name) {
       deferred.resolve(myData);
    } else if (dataID && dataID !== '') {
        $http.get('/api/data/' + dataID)
            .success(function(data) {
                 myData = data.object;
                 $cookies.dataID = data.object.id;
                 deferred.resolve(myData);
                 // update angular's scopes
                 $rootScope.$$phase || $rootScope.$apply();
             });
    } else { 
       deferred.reject();
    }

    return deferred.promise;
}

注意：您需要在服务上注入

$rootScope

在控制器上：

function myCtrl($scope, $http, $routeParams, myService) {
    myService.getData($routeParams.dataID).then(function(data) {
        // request was successful
        $scope.data = data;        
    }, function() {
        // request failed (same as your 'return false')
        $scope.data = undefined;
    });
}

---

可能想在angular docs网站上的教程中尝试使用

restful服务

方法。回报一个承诺。非常感谢。还向该服务注入了$q。工作很有魅力。谢谢，谢谢！我需要将$rootScope注入到我的服务中，以在解析延迟后更新angular的作用域（通过$rootScope.$$phase | |$rootScope.$apply（））