Остановить двухстороннюю привязку данных на модели

Question

Я довольно новичок в Угловом, поэтому, если есть некорректное мышление здесь, пожалуйста, дайте мне знать.

Я пытаюсь создать две отдельные переменные области, основанные на том же наборе данных. Я предположил, что я просто смогу установить их для разных переменных (как показано ниже), и это сработает. Однако я обнаружил, что независимо от того, что они назвали или как они определены (даже в директиве!), Изменение каждого изменяет их все.

Итак ... что я ожидаю/хотел бы видеть, так это то, что если я изменю ввод в верхнем повторе, он изменит модель только для этого повтора. В настоящее время он меняет все три.

В каком месте я ошибаюсь? Я предполагаю, что это имеет какое-то отношение к двухстороннему привязке данных. Заранее спасибо!

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

Я пытаюсь создать две отдельные переменные области, основанные на том же наборе данных . Я предположил, что я бы просто иметь возможность установить их в различных переменных (как показано ниже), и он будет работать

На самом деле обе эти Java-переменные, указывающие на ту же структуру данных в памяти. Поэтому, когда вы изменяете эту структуру, она отражает их оба. Подумайте об этих data и testData переменных в качестве указателей на одни и те же данные.

Вы можете copy эту структуру данных для того, чтобы создать 2 разных ее экземпляры в памяти, так что изменения в одной не отражают изменений в другой:

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

и если вы хотите, чтобы отразить это в ваша директива, идти вперед и клонировать экземпляр вы передаете к нему также:

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

Answer 2

Вот как данные и Testdata указывающие на то же, что ссылки, почему они копируют же value.There 2 решения, которые мы можем применить, если существует функция r eferences, дате и любых неопределенных значениях, которые должны быть там в объекте после копирования, тогда соответствующий параметр равен $ scope.testData = agular.copy (data);

Другие варианты $ scope.testData = JSON.parse (JSON.stringify (data));, но следующие ключи не будут скопированы.

1. функции.
2. Дата объект
3. свойства со значением неопределенными