I want to use the modal to edit my data. I pass the data to the modal instance. When I click ok I pass the edited data in the $scope.selected back to the controller.
There I would like to update the original $scope. Somehow the $scope doesn't update though. What am I doing wrong?
在那里,我想更新原始的$ scope。不知何故,$ scope不会更新。我究竟做错了什么?
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.data = { name: '', serial: '' }
$scope.edit = function (theIndex) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.data[theIndex];
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
// this is where the data gets updated, but doesn't do it
$scope.data.name = $scope.selected.name;
$scope.data.serial = $scope.selected.serial;
});
};
};
Modal Controller:
模态控制器:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
name: $scope.items.name,
serial: $scope.items.serial
};
$scope.ok = function () {
$modalInstance.close($scope.selected);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Modal:
莫代尔:
{{ name }}
1 个解决方案
#1
14
You didn't include your template for the modal, so this is a bit of a guess. Your code is pretty close to the example code for the angular-ui modal, which uses ng-repeat in the template. If you're doing the same thing, then you should be aware that ng-repeat creates a child scope which inherits from the parent.
If so, then in your case, you're assigning selected in the child scope, and this will not affect the parent scope's selected property. Then, when you try to access $scope.selected.name, it will be empty. In general, you should use objects for your models, and set properties on them, not assign new values directly.
This part of the documentation explains the scope problem in more detail.
文档的这一部分更详细地解释了范围问题。
Edit:
编辑:
You are also not binding your inputs to any model at all, so the data you enter there is never stored anywhere. You need to use ng-model to do that, e.g.: