AngularJS v1.5.5双向绑定不能与服务一起使用(AngularJS v1.5.5 two way binding doesn't work with service)

AngularJS v1.5.5双向绑定不能与服务一起使用(AngularJS v1.5.5 two way binding doesn't work with service)

我试图通过角度服务从资源中检索共享数据，请参阅下面的服务代码：

(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">