javascript - 从其他控制器内部的控制器调用函数

Question

我正在显示一个模式，如果用户单击删除按钮，我想从控制器 B 内的控制器 A 调用 delete()

我正在重构 AngularJS 网站上的 Todo App 示例代码（基于我到目前为止所学到的） https://jsfiddle.net/api/post/library/pure/

我在 github 上的完整项目 https://github.com/ahmadssb/Angular-Todo-App/tree/development

应用程序.js

angular.module('todoApp', [
    // modules
    'ui.bootstrap', 
    'ui.bootstrap.modal',

    // controllers
    'todo-list-controller', 
    'modal-controller',
    'modal-instance-controller',

    // directives
    'todo-list-directive'
    // services

]);

待办事项列表控制器.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 () {
            // I would like to call delete() from todo-list-controller.js
            $modalInstance.close($scope.$parent.delete());
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    });

删除-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>

待办事项列表模板.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">&nbsp;
                <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>]

Answer 1

您需要做的是将控制器之外的任何状态以及与状态相关的功能移动到服务中。在您的情况下，创建一个TodoListService管理待办事项列表并且可以在任何地方注入可能会很好。例如：

.service('TodoListService', function($http){
    var state = {
        todoList: []
    };
    $http.get("data/todos.json")
        .success(function (response) {
            state.todoList = response;
        });

    // add and expose any functions that let you manipulate your todolist here as well

    return {
        getState: function(){ return state; }
    }
});

现在您可以注入TodoListService任何控制器（或任何地方），并根据需要读取/操作待办事项列表。