I've been experimenting with a modal window feature using Angular UI Bootstrap.
Within the parent controller, I've defined 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 within the modal controller, there is an addTodo function:
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, a calendar displays todos per day. When clicking on a day's header, the modal window opens for adding todos. The issue arises when the added todos in the modal window are also reflected in the parent view simultaneously.
Currently, the todos appear twice in the parent view: once upon adding them in the modal view and again when clicking OK on the modal view.
I am looking for a solution to only add the todos items to the parent view upon clicking OK on the modal view.
If anyone has a solution, I would greatly appreciate your help!
You can view how it operates in Plunker: http://plnkr.co/edit/Nr1h7K3WZyWlRlrwzhM3?p=info