在绑定到控制器范围的工厂中修改数据，它不会更新 [英] Modified data in a factory that's bound to a controller's scope, it doesn't update

问题描述

我有一个非常简单的例子

(也可在此小提琴上找到:http://jsfiddle.net/depov5w6/)

我有 2 个工厂，一个返回具有属性data"的对象(绑定到控制器的范围)，另一个工厂有 2 个方法:populateData 和 pushData.populateData 将 dataSource.data 的值设置为新值.pushData 将新值推送到 dataSource.data

angular.module("app",[]).factory('dataSource', function() {返回 {数据:[初始化数据"]};}).factory('dataModifier', function(dataSource) {返回 {填充数据:函数(){dataSource.data = ["来自 populateData 的数据"];},推送数据:函数(){dataSource.data.push("来自推送数据的新数据");}}}).controller('dataCtrl', function($scope, dataSource, dataModifier) {$scope.data = dataSource.data;$scope.populateData = dataModifier.populateData;$scope.pushData = dataModifier.pushData;})

在我看来，我有一个调用 pushData 的按钮和另一个调用 populateData 的按钮.我也显示 $scope.data

<div ng-controller="dataCtrl" class="container"><p>数据:{{data}}</p><button ng-click="pushData()">推送数据</button><button ng-click="populateData()">将数据设置为新值</button>

如果你看看小提琴，如果你点击推送数据按钮，新值会被推送到数组上.但是，如果您单击将数据设置为新值"，则不会发生任何事情，随后单击推送数据也不会执行任何操作.我想我明白当你点击填充数据时，你失去了对 $scope.data 绑定到的数组的引用，但为什么 $scope 没有意识到 dataSource.data 有一个新值?我将如何解决这个问题?我尝试将数据设为私有变量，并使用 getter 和 setter，但没有任何效果.

我感谢任何见解.

解决方案

不是将数据分配给范围，而是将整个数据源对象分配给范围 &然后使用它.

类似于:http://jsfiddle.net/depov5w6/1/

.controller('dataCtrl', function($scope, dataSource, dataModifier) {$scope.dataSource = 数据源；$scope.populateData = dataModifier.populateData;$scope.pushData = dataModifier.pushData;});

<div ng-controller="dataCtrl" class="container"><p>数据:{{dataSource.data}}</p><button ng-click="pushData()">推送数据</button><button ng-click="populateData()">将数据设置为新值</button>

这个东西起作用的原因是因为 angular 的脏检查的工作方式.它比较整个对象以检测是否有任何变化.当您将变量绑定到作用域时，它会在其上创建监视.如果您将对象分配给范围，它会检查对象的值以监视属性值的任何更改.所以你需要关注对象的属性.

I have a pretty simple example

(also available on this fiddle: http://jsfiddle.net/depov5w6/)

I have 2 factories, one which returns an object with the property 'data', (which is bound to the scope of a controller) and another factory that has 2 methods: populateData and pushData. populateData sets the value of dataSource.data to be a new value. pushData pushes a new value onto dataSource.data

angular.module("app",[])
  .factory('dataSource', function() { 
    return {
      data: ["Init Data"]
    };
  })
  .factory('dataModifier', function(dataSource) { 
    return {
      populateData: function() {
        dataSource.data = ["data from populateData"];
      },
      pushData: function() {
        dataSource.data.push("new data from push data");
      }
    }
  })
  .controller('dataCtrl', function($scope, dataSource, dataModifier) {
    $scope.data = dataSource.data;
    $scope.populateData = dataModifier.populateData;
    $scope.pushData = dataModifier.pushData;
  })

In my view, I have a button that calls pushData and another button that calls populateData. I also display $scope.data

<div ng-app="app">
  <div ng-controller="dataCtrl" class="container">
    <p>Data: {{data}}</p>
    <button ng-click="pushData()">Push Data</button>
    <button ng-click="populateData()">Set Data To New Value</button>
  </div>
</div>

If you look at the fiddle, if you click the Push Data button, new values get pushed onto the array. However, if you click 'Set Data To New Value', nothing happens and subsequent click to push data do nothing. I think I understand that when you click populate data, you lose the reference to the array that $scope.data was bound to, but why doesn't $scope realize that there is a new value for dataSource.data? How would I fix this? I tried making data a private variable, and using getters and setters, but that did nothing.

I appreciate any insight.

解决方案

Instead of assigning data to the scope, assign whole datasource object to the scope & then use it.

Something like: http://jsfiddle.net/depov5w6/1/

.controller('dataCtrl', function($scope, dataSource, dataModifier) {
    $scope.dataSource = dataSource;
    $scope.populateData = dataModifier.populateData;
    $scope.pushData = dataModifier.pushData;
});

<div ng-app="app">
   <div ng-controller="dataCtrl" class="container">
   <p>Data: {{dataSource.data}}</p>
   <button ng-click="pushData()">Push Data</button>
   <button ng-click="populateData()">Set Data To New Value</button>
</div>

The reason this thing works is because of the way angular's dirty checking works. It compares whole objects to detect if there is any change. When you bind a variable to the scope it creates watch on it. If your assign object to the scope it checks object's value to monitor any changes in properties value. So you need to put watch on the property of the object.

这篇关于在绑定到控制器范围的工厂中修改数据，它不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！