我试图通过角度服务从资源中检索共享数据,请参阅下面的服务代码:
(function(){var app = angular.module('geoProApp'); app.factory('project', ['$resource','$log', function ($resource,$log) { var res = $resource('http://localhost/api/project/:id', { id: '@id' }, { queryPaged: { method: 'POST', isArray: false, headers: { 'Content-Type': 'application/json' }, url: 'http://localhost/api/project/paged', }, //ignore that for now update: { method: 'PUT' } }); var currentData = { totalItems:0, projects:[] }; $log.log('initial value'); $log.log(currentData); return { queryPaged: function (params) { return res.queryPaged(null, params).$promise.then(function (response) { currentData.totalItems =response.total; currentData.projects=response.result; $log.log('after data retrieval in service'); $log.log(currentData); return response; }) }, data: currentData } }]); }());在使用该服务的控制器中,我想绑定到数据,如下所示:
app.controller('projectList', function ($scope, $state, $stateParams, $log, $http, auth, project, filter, users, bsLoadingOverlayService) { .... $scope.totalItems = project.data.totalItems; $scope.projects = project.data.projects; project.queryPaged(helpers.setPagingParams($scope.currentPage, $scope.itemsPerPage, filter)).then(function () { $log.log('success callback exposed by service'); $log.log(project.data); $log.log('bound values') $log.log($scope.totalItems); $log.log($scope.projects); .... });但是,似乎绑定变量$scope.totalItems和$scope.projects永远不会更新,即使服务检索新数据,这可以在这里看到:
控制台的输出
有人能指出我可能会错过的正确方向吗?
I am trying to retrieve an share data from a resource via an angular service, please see code of the service below:
(function(){var app = angular.module('geoProApp'); app.factory('project', ['$resource','$log', function ($resource,$log) { var res = $resource('http://localhost/api/project/:id', { id: '@id' }, { queryPaged: { method: 'POST', isArray: false, headers: { 'Content-Type': 'application/json' }, url: 'http://localhost/api/project/paged', }, //ignore that for now update: { method: 'PUT' } }); var currentData = { totalItems:0, projects:[] }; $log.log('initial value'); $log.log(currentData); return { queryPaged: function (params) { return res.queryPaged(null, params).$promise.then(function (response) { currentData.totalItems =response.total; currentData.projects=response.result; $log.log('after data retrieval in service'); $log.log(currentData); return response; }) }, data: currentData } }]); }());In the controller using the service, I want to bind to the data, like this:
app.controller('projectList', function ($scope, $state, $stateParams, $log, $http, auth, project, filter, users, bsLoadingOverlayService) { .... $scope.totalItems = project.data.totalItems; $scope.projects = project.data.projects; project.queryPaged(helpers.setPagingParams($scope.currentPage, $scope.itemsPerPage, filter)).then(function () { $log.log('success callback exposed by service'); $log.log(project.data); $log.log('bound values') $log.log($scope.totalItems); $log.log($scope.projects); .... });However, it seems that bound variables $scope.totalItems and $scope.projects never get updated, even tho the service retrieves new data, which can be seen here:
output of console
Can someone point me in the right direction what I might be missing?
最满意答案
Angular不太喜欢直接使用原始数据类型。 双向绑定不能按预期工作。 而不是像这样设置控制器范围
$scope.totalItems = project.data.totalItems; $scope.projects = project.data.projects;我宁愿有这样的对象。
$scope.model = project.data;阅读本文 ,解释为什么双向绑定不适用于基本类型。
这篇文章的一句好话是......
总是有'。' 在您的ng模型中......拥有'。' 在你的模型中将确保原型继承发挥作用。 因此,使用<input type="text" ng-model="someObj.prop1">
Angular isn't very fond of using primitive datatypes directly. The two way binding doesn't work as expected. Instead of setting the controller scope like this
$scope.totalItems = project.data.totalItems; $scope.projects = project.data.projects;I would instead have an object like this.
$scope.model = project.data;Read this article that explains why the two way binding doesn't work with primitive types.
A good quote from the article is...
always have a '.' in your ng-models ... Having a '.' in your models will ensure that prototypal inheritance is in play. So, use <input type="text" ng-model="someObj.prop1">
更多推荐
发布评论