I am currently working on a modal where, upon clicking the delete button, I need to execute the delete() function from controller A within controller B
https://i.sstatic.net/HJhGT.png
As part of my refactoring process, I am updating the Todo App example code from the AngularJS website, incorporating my newfound knowledge. https://jsfiddle.net/api/post/library/pure/
For the full project, you can visit my GitHub repository: https://github.com/ahmadssb/Angular-Todo-App/tree/development
app.js
angular.module('todoApp', [
// modules
'ui.bootstrap',
'ui.bootstrap.modal',
// controllers
'todo-list-controller',
'modal-controller',
'modal-instance-controller',
// directives
'todo-list-directive'
// services
]);
todo-list-controller.js
angular.module('todo-list-controller', [])
.controller('TodoListController', function ($scope, $http) {
var self = this;
self.todoList = [];
$http.get("data/todos.json")
.success(function (response) {
self.todoList = response;
});
$scope.numberOfdeletedNotes = function () {
var count = 0;
angular.forEach(self.todoList, function (todo) {
count += todo.done ? 1 : 0;
});
console.log(count);
return count;
};
$scope.delete = function () {
var currentTodoList = self.todoList;
self.todoList = [];
angular.forEach(currentTodoList, function (todo) {
if (!todo.done) self.todoList.push(todo);
});
};
});
modal-controller.js
angular.module('modal-controller', [])
.controller('ModalController', function ($scope, $uibModal, $log) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/modals/delete-modal.html',
controller: 'ModalInstanceController',
size: size,
});
console.log('open()');
};
});
modal-instance-controller.js
angular.module('modal-instance-controller', [])
.controller('ModalInstanceController', function ($scope, $modalInstance) {
$scope.ok = function () {
// Here I intend to invoke delete() from todo-list-controller.js
$modalInstance.close($scope.$parent.delete());
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
delete-modal.html
<div class="modal-header">
<h3 class="modal-title">Warning!</h3>
</div>
<div class="modal-body" ng-control="TodoListController as todoList">
<h4>You are about to delete <span><i> {{$scope.$parent.numberOfdeletedNotes()}} </i></span> notes</h4>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" ng-click="ok()">Delete</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
todo-list-template.html
[![<div class="col-md-12" ng-controller="TodoListController as todoList">
<h2>TODO App</h2>
<div class="todoList">
<span class="numberOfList" ng-controller='ModalController as modal'>
{{remaining()}} of {{todoList.todoList.length}} remaining
<button class="btn-danger btn" ng-click="open()">Delete</button>
</span>
<ul class="list" ng-repeat="todo in todoList.todoList">
<li class="item">
<input type="checkbox" ng-model="todo.done">
<span class="todo-{{todo.done}}">{{todo.text}} - {{todo.done}} </span>
</li>
</ul>
</div>
<div class="newTask">
<form class="form-group" ng-submit="addTodo()">
<feildset>
<input type="text" size="30" class="form-control" ng-model="text">
<input type="submit" value="submit" class="btn btn-primary">
</feildset>
</form>
</div>
</div>]