Question

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

})

Answer 1

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

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

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

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

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

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

Answer 2

这里数据和testData指向相同的引用它们为什么复制相同的值。如果存在函数引用，日期对象和任何需要在对象中存在的未定义值，我们可以应用2个解决方案复制然后适当的选项是 $ scope.testData = agular.copy（数据）;

另一个选项 $ scope.testData = JSON.parse（JSON.stringify（data））; 但是后续的密钥不会被复制。

功能
日期对象
值为undefined的属性

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

2 个答案: