但是,我注意到在后来的视图中刷新(不同的控制器)清除了数据并打破了页面.因此,我在要在多个控制器中使用的服务上创建了一个函数,以检查数据是否可用并作出如下反应：
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上的most similar problem没有使用服务.
我试过了：
$scope.$apply($scope.data = myService.getData($routeParams.dataID));
和
$scope.$apply(function() {
$scope.data = myService($routeParams.dataID);
});
两次我只得到错误：$digest已在进行中.
$http.get('/api/data/' + dataID)
.success(function(data) {
myData = data.object;
$cookies.dataID = data.object.id;
return myData;
});
上面代码片段的返回不会从getData返回任何内容,因为它将在$http.get成功回调的上下文中执行(而不是在getData调用堆栈上).
你的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,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;
});
}
