gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 13:51:57 25 4
gpt4 key购买 nike

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

但是,我注意到在稍后的 View 中刷新(不同的 Controller )会清除数据并破坏页面。因此,我在服务上创建了一个函数,用于多个 Controller ,以检查数据是否可用并做出如下 react :

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

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

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

我查看了使用 $routeProvider 的解析...但这使得从 url 获取 ID 具有挑战性,因为解析对象似乎无法访问 $routeParams。我知道 $scope.$apply 应该在被外部函数更改时帮助更新范围......但我不知道把它放在哪里。 most similar problem在 SO 上没有使用服务。

我试过:
$scope.$apply($scope.data = myService.getData($routeParams.dataID));


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

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

最佳答案

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

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

注意:您需要注入(inject) $rootScope为您服务。

在你的 Controller 上:
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;
});
}

关于service - AngularJS ng-repeat 与来自服务的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14947478/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com