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

问题描述

我有一个pretty简单的例子

I have a pretty simple example

（也可在此琴： http://jsfiddle.net/depov5w6/ ）

我有2个工厂，其中一个与物业数据，（这势必控制器的范围），以及另一家工厂有2个方法返回一个对象：populateData和pushData。 populateData设置dataSource.data的值是一个新的值。 pushData将一个新值到dataSource.data

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;
  })

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

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>

如果你看一下小提琴，如果单击推送数据按钮，新的价值被推到阵列上。但是，如果您单击设置数据要新价值，没有任何反应和随后的点击将数据推什么也不做。我想我明白，当你点击填充数据，你就失去了参考到$ scope.data被绑定到数组，但为什么不$范围意识到有对dataSource.data一个新的价值？我将如何解决这一问题？我试图使数据的私有变量，并使用getter和setter方法​​，但什么也没做。

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.

我AP preciate任何见解。

I appreciate any insight.

推荐答案

，分配整个数据源对象的范围和放大器;然后使用它。

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

喜欢的东西： 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屋！