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

Question

我对Angular很新,所以如果这里有一些不正确的想法,请告诉我.

我正在尝试基于相同的数据集创建两个单独的范围变量.我假设我只能将它们设置为不同的变量(如下所示),它会起作用.然而,我发现,无论它们的名称是什么,或者它们是如何定义的(即使在指令中!),更改它们都会改变它们.

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

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

Plnkr

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'
        }
    }

})

Answer 1

我正在尝试基于相同的数据集创建两个单独的范围变量.我假设我只能将它们设置为不同的变量(如下所示),它会起作用

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

您可以使用copy此数据结构,以便在内存中创建它的2个不同实例,以便更改为一个不会反映另一个的更改:

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

如果你想在你的指令中反映这一点,那么继续克隆你传递给它的实例:

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