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

我对 Angular 还很陌生，所以如果这里有一些不正确的想法，请告诉我。

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

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

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

Plnkr http://plnkr.co/edit/xQnx9JQ0NK9bWgNE0SKm?p=preview

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

})

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

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

你可以copy https://docs.angularjs.org/api/ng/function/angular.copy此数据结构是为了在内存中创建它的 2 个不同实例，以便对一个实例的更改不会反映另一个实例的更改：

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

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

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