Question

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

    (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永远不会更新，即使服务检索新数据，也可以在这里看到：

output of console

有人能指出我可能缺少的正确方向吗？

Answer 1

Angular并不喜欢直接使用原始数据类型。双向绑定并不像预期的那样工作。而不是像这样设置控制器范围

$scope.totalItems = project.data.totalItems;
$scope.projects = project.data.projects;

我会有一个像这样的对象。

$scope.model = project.data;

阅读此article，解释为什么双向绑定不适用于基本类型。

文章的一句好话是......

总是有一个＆＃39;。＆＃39;在你的ng模型中......有一个＆＃39;。＆＃39;在你的模型中将确保原型继承发挥作用。因此，请使用<input type="text" ng-model="someObj.prop1">

AngularJS v1.5.5双向绑定不能与服务一起使用

1 个答案: