我对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'
}
}
})
解决方法
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
实际上这两个javascript变量都指向内存中的相同数据结构.因此,当您修改此结构时,它会反映到它们.将这些数据和testData变量视为指向相同数据的指针.
你可以copy这个数据结构,以便在内存中创建它的2个不同的实例,这样对一个的更改不会反映到另一个的更改：
$scope.data = data; $scope.testData = angular.copy(data);
如果你想在你的指令中反映这一点,那么继续克隆你传递给它的实例：
<div tester data="angular.copy(data)"></div>
