AngularJS ng-repeat 与来自服务的数据

Question

最初在我的应用程序中，我使用非常基本的 $http 调用创建了控制器，以通过从 url ($routeParams) 获取对象的 ID 来获取资源。 ng-repeat 正确显示结果。

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

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);

    ...
}

这是模板。它在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 具有挑战性，因为解析对象似乎无法访问 $routeParams。我知道 $scope.$apply 应该在被外部函数更改时帮助更新范围......但我不知道把它放在哪里。 SO 上的most similar problem 没有使用服务。

我试过了：

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

和

$scope.$apply(function() {
    $scope.data = myService($routeParams.dataID);
});

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

Answer 1

问题在于您与服务交互的方式。由于您的getData 函数可以返回同步和/或异步信息，因此您不能只使用普通的return(s)。

$http.get('/api/data/' + dataID)
    .success(function(data) {
        myData = data.object;
        $cookies.dataID = data.object.id;
        return myData;
    });

上述 sn-p 上的 return 不会从 getData 返回任何内容，因为它将在 $http.get 成功回调的上下文中执行（而不是在 getData 调用堆栈上）。

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

您的getData 函数应如下所示：

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;
    });
}