停止模型上的双向数据绑定答案

【问题标题】：Stop two way databinding on model停止模型上的双向数据绑定
【发布时间】：2014-10-07 19:49:07
【问题描述】：

我是 Angular 的新手，所以如果这里有一些不正确的想法，请告诉我。

我正在尝试基于相同的数据集创建两个单独的范围变量。我假设我只能将它们设置为不同的变量（如下所示）并且它会起作用。然而，我发现，无论它们被命名或如何定义（即使在指令中！），改变一个都会改变它们。

所以...我期望/希望看到的是，如果我更改顶部重复中的输入，它只会更改该重复的模型。目前它改变了所有三个。

我哪里错了？我认为这与双向数据绑定有关。提前致谢！

HTML：

 <h4>data</h4>
    <div ng-repeat="person in data">
      {{person.name}}
      <input ng-model="person.name" />
    </div>
    {{data[0].name}}
    <br>
    <br>

    <h4>testData</h4>
    <div ng-repeat="person in testData">
      {{person.name}}
      <input ng-model="person.name" />
    </div>
    {{testData[0].name}}

    <h4>Directive</h4>
    <div tester data="data"></div>

指令 HTML：

<div ng-repeat="person in data">
  {{person.name}}
  <input ng-model="person.name" />
</div>
{{data[0].name}}

JS：

var app = angular.module('test', []);

(function () {

    var testController = function ($scope) {

      var data = [
        {name:'Jordan', age:30},
        {name:'Sean', age:32},
        {name:'Seth', age:26}
      ];

      $scope.data = data;

      $scope.testData = data;
    }    

    testController.$inject = ['$scope', '$http'];

    app.controller('testController', testController);


}())

app.directive('tester', function(){
    return {
        restrict: 'A',
        templateUrl: 'directive.html',
        //If percent = true then that table should have a "percent change" th
        scope:{
            data: '=data'
        }
    }

})

【问题讨论】：

标签： angularjs data-binding

【解决方案1】：

我正在尝试基于相同的创建两个单独的范围变量数据集。我以为我只能将它们设置为不同的变量（如下所示），它会工作

实际上，这两个 javascript 变量都指向内存中的相同数据结构。因此，当您修改此结构时，它会反映到它们两者上。将这些 data 和 testData 变量视为指向相同数据的指针。

您可以copy此数据结构，以便在内存中创建它的 2 个不同实例，以便对一个的更改不会反映另一个的更改：

$scope.data = data;
$scope.testData = angular.copy(data);

如果您想在指令中反映这一点，请继续克隆您传递给它的实例：

<div tester data="angular.copy(data)"></div>

【讨论】：

这很完美，正是我想要的。搞定了。我会尽快接受！
哈，没门...我昨天遇到了这个确切的问题。希望我昨天知道这件事！
@DarinDimitrov 很棒的解决方案

【解决方案2】：

这里 data 和 testData 都指向相同的引用，说明它们为什么要复制相同的值。如果有函数引用、日期对象和任何未定义的值，我们可以应用两种解决方案，这些值需要在之后的对象中存在复制然后适当的选项是 $scope.testData = agular.copy(data);

另一个选项 $scope.testData = JSON.parse(JSON.stringify(data)); 但不会复制以下键。

函数。
日期对象
值为 undefined 的属性

【讨论】：