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

问题描述

我对Angular来说很新，所以如果这里有一些错误的想法，请让我知道。

I'm fairly new to Angular so if there is some incorrect thinking here, please let me know.

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

I'm trying to create two separate scope variables based on the same data set. I assumed that I would just be able to set them to different variables (as shown below) and it would work. I've found, however, that no matter what they are named or how they are defined (even in a directive!) that changing one changes them all.

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

So...what I expect/would like to see is that if I change the input in the top repeat it will only change the model for that repeat. Currently it changes all three.

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

Where am I going wrong here? I assume this has something to do with the two way data-binding. Thanks in advance!

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变量都指向内存中相同的数据结构。所以当你修改这个结构时，它反映给他们。将数据和 testData 变量作为指向相同数据的指针。

Actually both those javascript variables are pointing to the same data structure in memory. So when you modify this structure it reflects to both of them. Think of those data and testData variables as pointers to the same data.

您可以 复制 这个数据结构为了在内存中创建2个不同的实例，所以改变一个不反映其他的变化：

You could copy this data structure in order to create 2 different instances of it in memory so that changes to one do not reflect to changes of the other:

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

如果您想在您的指令中反映出来，请继续复制您传递给的实例它也是：

and if you wanted to reflect this in your directive, go ahead and clone the instance you are passing to it as well:

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

这篇关于在模型上停止双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！