I am trying to use a modal window (see http://angular-ui.github.io/bootstrap/).
我正在尝试使用模态窗口(请参阅http://angular-ui.github.io/bootstrap/)。
In the parent controller I have the following function:
在父控制器中,我有以下功能:
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
year: function () {
return $scope.year.value;
},
month: function () {
return $scope.month;
},
day: function () {
return $scope.day.name;
},
todos: function () {
return $scope.day.toDoItems;
}
},
backdrop: 'static'
});
modalInstance.result.then(function (todos) {
angular.forEach(todos, function (todo) {
if (todo.New)
$scope.day.toDoItems.push(todo);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
And in the modal controller there is an addTodo function:
在模态控制器中有一个addTodo函数:
var ModalInstanceCtrl = function ($scope, $modalInstance, year, month, day, todos) {
...
$scope.todos = todos;
$scope.addTodo = function () {
$scope.todos.push({ TodoText: $scope.todoText.value, Done: false, Del: false, Date: new Date(year, month, day), Priority: 1, New: true});
$scope.todoText.value = "";
};
...
$scope.ok = function () {
$modalInstance.close($scope.todos);
};
};
In the parent view there is shown a calendar with todos per day. When clicking on a day's header the modal window is open and you can add todos. My problem is that when adding todos in modal window, also the todos are added to parent view, at the same moment. Now the todos are added twice in the parent view: once at the moment they are added in modal view and once I click OK on modal view. But I want the todos items to be added to parent view only when clicking OK on modal view.
在父视图中,显示了每天都有待办事项的日历。单击日期标题时,模态窗口处于打开状态,您可以添加待办事项。我的问题是,在模态窗口中添加待办事项时,同时也会将待办事项添加到父视图中。现在todos在父视图中添加了两次:一次在模态视图中添加它们,一旦我在模态视图上单击OK。但我希望只有在模态视图上单击“确定”时才将todos项添加到父视图中。
Have anyone a solution for this? Thanks in advance!
有谁解决这个问题?提前致谢!
You can see in Plunker how it works: http://plnkr.co/edit/Nr1h7K3WZyWlRlrwzhM3?p=info
你可以在Plunker中看到它是如何工作的:http://plnkr.co/edit/Nr1h7K3WZyWlRlrwzhM3?p = info
1 个解决方案
#1
2
In your resolve object for the modal controller you're actually passing the parent's scope todos object back as a reference so when you assign it in your modal's controller $scope.todos = todos; its actually pointing to the parent's todos scope variable. You can return a copy of the parent's todos instead of a reference to the variable.
在模态控制器的解析对象中,您实际上将父级的范围todos对象作为参考传递回来,因此当您在模态控制器中指定它时$ scope.todos = todos;它实际上指向父的todos范围变量。您可以返回父级todos的副本,而不是对变量的引用。
todos: function () {
return angular.copy($scope.day.toDoItems);
}
#1
2
In your resolve object for the modal controller you're actually passing the parent's scope todos object back as a reference so when you assign it in your modal's controller $scope.todos = todos; its actually pointing to the parent's todos scope variable. You can return a copy of the parent's todos instead of a reference to the variable.
在模态控制器的解析对象中,您实际上将父级的范围todos对象作为参考传递回来,因此当您在模态控制器中指定它时$ scope.todos = todos;它实际上指向父的todos范围变量。您可以返回父级todos的副本,而不是对变量的引用。
todos: function () {
return angular.copy($scope.day.toDoItems);
}