Angularjs 传递引用时进行数据绑定?
Angularjs data binding when passing a reference?
有时,当两个变量引用同一个变量时,它们并不是像这样绑定在一起的:
var option = 1;
$scope.a = option;
$scope.b = option;
当您更改 $scope.a 时,$scope.b 不会更改。看到这个 Plunker
但是,有时它们会绑定在一起,例如我遇到这样的模态:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.testDataArray = [{
"name": "Doe"
}, {
"name": "Deer"
}, {
"name": "Female"
}];
$scope.open = function(testData) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function() {
return testData;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.scopeData = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function($scope, $modalInstance, data) {
$scope.modalData1 = data;
$scope.modalData2 = data;
$scope.ok = function() {
$modalInstance.close($scope.modalData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
参见Plunker。
这里的"modalData1"和"modalData2"都是指"data"。
在这个 Plunker 的任何模态中,您更改 modalData1,然后 modalData2 随之更改。
为什么会这样??
谢谢!
更新:
您应该复制该元素,因为由于 javascript 是按引用传递的,因此这两个变量(引用)实际上都指向同一个对象。如果要消除该副作用,则必须在分配之前复制对象:
$scope.modalData1 = angular.copy(data);
$scope.modalData2 = angular.copy(data);
原始答案:
在示例中,您提供的 modalData2 输入随 modalData1 发生变化,因为它们在 ng-model 属性中分配了相同的模型:
<div class="modal-body">
modalData1:
<input ng-model="modalData1" />
<br>
modalData2:
<input ng-model="modalData1" />
</div>
当我修复它时,它们是独立的(plunker):
<div class="modal-body">
modalData1:
<input ng-model="modalData1" />
<br>
modalData2:
<input ng-model="modalData2" />
</div>
那么当你更新modalData1输入时,那么其他的没有变化。
这是因为 angularjs 支持双向绑定,当您使用 angularjs 提供的指令 ng-model 时会在此处完成,并且您将两个输入字段绑定为相同的ng-model 值改变一个反映在另一个。
简单数据类型,例如您使用的数字 1(var 选项 = 1:作为整数处理)默认情况下会被 复制。 另一方面,对象或函数是通过引用传递的,因此它们的内容似乎绑定在一起。
有时,当两个变量引用同一个变量时,它们并不是像这样绑定在一起的:
var option = 1;
$scope.a = option;
$scope.b = option;
当您更改 $scope.a 时,$scope.b 不会更改。看到这个 Plunker
但是,有时它们会绑定在一起,例如我遇到这样的模态:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.testDataArray = [{
"name": "Doe"
}, {
"name": "Deer"
}, {
"name": "Female"
}];
$scope.open = function(testData) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function() {
return testData;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.scopeData = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function($scope, $modalInstance, data) {
$scope.modalData1 = data;
$scope.modalData2 = data;
$scope.ok = function() {
$modalInstance.close($scope.modalData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
参见Plunker。 这里的"modalData1"和"modalData2"都是指"data"。 在这个 Plunker 的任何模态中,您更改 modalData1,然后 modalData2 随之更改。
为什么会这样??
谢谢!
更新:
您应该复制该元素,因为由于 javascript 是按引用传递的,因此这两个变量(引用)实际上都指向同一个对象。如果要消除该副作用,则必须在分配之前复制对象:
$scope.modalData1 = angular.copy(data);
$scope.modalData2 = angular.copy(data);
原始答案:
在示例中,您提供的 modalData2 输入随 modalData1 发生变化,因为它们在 ng-model 属性中分配了相同的模型:
<div class="modal-body">
modalData1:
<input ng-model="modalData1" />
<br>
modalData2:
<input ng-model="modalData1" />
</div>
当我修复它时,它们是独立的(plunker):
<div class="modal-body">
modalData1:
<input ng-model="modalData1" />
<br>
modalData2:
<input ng-model="modalData2" />
</div>
那么当你更新modalData1输入时,那么其他的没有变化。
这是因为 angularjs 支持双向绑定,当您使用 angularjs 提供的指令 ng-model 时会在此处完成,并且您将两个输入字段绑定为相同的ng-model 值改变一个反映在另一个。
简单数据类型,例如您使用的数字 1(var 选项 = 1:作为整数处理)默认情况下会被 复制。 另一方面,对象或函数是通过引用传递的,因此它们的内容似乎绑定在一起。