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

Question

我显示一个模态，如果用户点击删除按钮，我想从控制器B内的控制器A调用delete（）

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

我在github上的完整项目 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

]);

待办事项列表-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);
            });
        };
    });

模态-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()');
        };
    });

模态实例-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>

待办事项列表-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">&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注入任何控制器（或任何地方），并根据需要读取/操作待办事项列表。