更改服务数据时更新范围值

我的应用程序中提供以下服务：

uaInProgressApp.factory('uaProgressService', 
    function(uaApiInterface, $timeout, $rootScope){
        var factory = {};
        factory.taskResource = uaApiInterface.taskResource()
        factory.taskList = [];
        factory.cron = undefined;
        factory.updateTaskList = function() {
            factory.taskResource.query(function(data){
                factory.taskList = data;
                $rootScope.$digest
                console.log(factory.taskList);
            });
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.startCron = function () {
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.stopCron = function (){
            $timeout.cancel(factory.cron);
        }
        return factory;
});

然后在这样的控制器中使用它：

uaInProgressApp.controller('ua.InProgressController',
    function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
        uaContext.getSession().then(function(){
            uaContext.appName.set('Testing house');
            uaContext.subAppName.set('In progress');
            uaProgressService.startCron();

            $scope.taskList = uaProgressService.taskList;
        });
    }
);

因此，基本上我的服务factory.taskList每5秒更新一次，因此我将其链接factory.taskList到$scope.taskList。然后$apply，我尝试了类似的不同方法，$digest但是对factory.taskList所做的更改未反映在我的控制器和视图中$scope.taskList。

它在我的模板中仍然为空。您知道我如何传播这些变化吗？

虽然使用$watch可以解决问题，但这不是最有效的解决方案。您可能想要更改在服务中存储数据的方式。

问题在于，taskList每次在您的作用域停留指向旧位置时为它分配一个新值时，都将替换与之关联的内存位置。您可以在这种情况下看到这种情况。

首次加载插件时，使用Chrome进行堆快照，单击按钮后，您将看到示波器指向的内存位置从未更新，而列表指向了另一个内存位置。

您可以通过让服务中包含一个包含可能更改的变量的对象（如data:{task:[], x:[], z:[]}）来轻松解决此问题。在这种情况下，永远不要更改“数据”，但随时可以更改其任何成员。然后，您可以将此数据变量传递给范围，并且只要不通过尝试将“数据”分配给其他变量来覆盖它，只要数据中的字段发生变化，范围就将知道并正确更新。

此插件显示了使用上述建议的修复程序运行的相同示例。在这种情况下，无需使用任何观察程序，并且一旦发生未在视图上进行某些更新的情况，您就知道您需要做的就是运行一个范围$apply来更新视图。

这样，您便无需观察者频繁地比较变量的更改和在您需要观察许多变量的情况下涉及的丑陋设置。这种方法的唯一问题是，您在视图（html）上将拥有“数据”。在所有以前只有变量名的地方加上前缀。

Angular（与Ember和其他框架不同）不提供特殊包装的对象，这些对象半魔术地保持同步。你操纵的对象是普通的JavaScript对象和就像说var a = b;没有链接的变量a，并b说$scope.taskList = uaProgressService.taskList不会链接这两个值。

对于这种link-ing，angular提供$watch上$scope。您可以观察的值，uaProgressService.taskList并$scope在更改时更新值：

$scope.$watch(function () { return uaProgressService.taskList }, function (newVal, oldVal) {
    if (typeof newVal !== 'undefined') {
        $scope.taskList = uaProgressService.taskList;
    }
});

传递给该$watch函数的第一个表达式在每个$digest循环上执行，而第二个参数是使用新值和旧值调用的函数。

我不确定这是否有帮助，但是我正在做的是将该函数绑定到$ scope.value。例如

angular
  .module("testApp", [])
  .service("myDataService", function(){
    this.dataContainer = {
      valA : "car",
      valB : "bike"
    }
  })
  .controller("testCtrl", [
    "$scope",
    "myDataService",
    function($scope, myDataService){
      $scope.data = function(){
        return myDataService.dataContainer;
      };
  }]);

然后我将其绑定为DOM

<li ng-repeat="(key,value) in data() "></li>

这样，您可以避免在代码中使用$ watch。

否$watch或其他要求。您可以简单地定义以下内容

uaInProgressApp.controller('ua.InProgressController',
  function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
    uaContext.getSession().then(function(){
        uaContext.appName.set('Testing house');
        uaContext.subAppName.set('In progress');
        uaProgressService.startCron();
    });

    $scope.getTaskList = function() {
      return uaProgressService.taskList;
    };
  });

因为该函数getTaskList所属$scope的返回值将在每次更改时进行评估（并更新）uaProgressService.taskList

轻型替代方案是，在控制器初始化期间，您订阅了在服务中设置的通知程序模式。

就像是：

app.controller('YourCtrl'['yourSvc', function(yourSvc){
    yourSvc.awaitUpdate('YourCtrl',function(){
        $scope.someValue = yourSvc.someValue;
    });
}]);

并且该服务具有以下内容：

app.service('yourSvc', ['$http',function($http){
    var self = this;
    self.notificationSubscribers={};
    self.awaitUpdate=function(key,callback){
        self.notificationSubscribers[key]=callback;
    };
    self.notifySubscribers=function(){
        angular.forEach(self.notificationSubscribers,
            function(callback,key){
                callback();
            });
    };
    $http.get('someUrl').then(
        function(response){
            self.importantData=response.data;
            self.notifySubscribers();
        }
    );
}]);

当控制器从服务中刷新时，这可以让您更仔细地进行微调。

就像加布里埃尔·皮亚琴蒂（Gabriel Piacenti）所说的那样，如果将变化的数据包装到一个对象中，则不需要手表。

但是为了正确更新合并范围中的已更改服务数据，重要的是，使用服务数据的控制器的合并范围值不要直接指向更改数据（字段）。相反，范围值必须指向包装更改数据的对象。

以下代码应对此进行更清晰的解释。在我的示例中，我使用NLS服务进行翻译。NLS令牌正在通过http更新。

服务：

app.factory('nlsService', ['$http', function($http) {
  var data = {
    get: {
      ressources        : "gdc.ressources",
      maintenance       : "gdc.mm.maintenance",
      prewarning        : "gdc.mobMaint.prewarning",
    }
  };
// ... asynchron change the data.get = ajaxResult.data... 
  return data;
}]);

控制器和作用域表达式

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.get.maintenance}}</span>
</div>

上面的代码有效，但是首先我想直接访问我的NLS令牌（请参见以下代码段），并且这里的值没有更新。

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService.get;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.maintenance}}</span>
</div>