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

    ...
}

这是模板.它是在玉中,这意味着而不是尖括号,你只需在括号中列出带有参数的元素,然后在括号后面列出内容.

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列表为空.

我使用console.log在返回"return myData"之前检查myData,并且myData正在工作,它只是没有及时返回,并且无论出于何种原因,只要$ scope获取数据,列表就不会更新.

我看了一个使用$ routeProvider的解决方案......但这使得从url获取ID具有挑战性,因为解析对象似乎无法访问$ routeParams.我知道$ scope.$ apply应该有助于在外部函数改变时更新范围......但我不知道在哪里放置它.在大多数类似的问题对SO未使用的服务.

我试过了:

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

和

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

两次我只得到错误:$ digest已在进行中.

Answer 1

问题在于您与服务交互的方式.由于您的getData函数可以返回同步和/或异步信息,因此您不能只使用法线return.

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

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