javascript - 从指令调用的 Controller 函数内的空数组 - AngularJS

Question

我遇到了一个看似微不足道的棘手问题，但我没有找到解决它的好方法。

本质上，我正在使用 Angular 和 Angular-Material 构建待办事项列表应用程序。

我有一个ma​​in.html，其中重要的部分是:

<md-content ng-show="mainCtrl.todos.length">
   <md-list class="todo_list" flex>
     <md-subheader class="md-no-sticky">{{mainCtrl.todoList.label}}</md-subheader>
       <acme-todo ng-show="mainCtrl.todos" ng-repeat="todo in mainCtrl.todos track by $index"
                  text="todo.content" index="$index"></acme-todo>
   </md-list>
</md-content>

acme-todo 是包含 todo.html 的指令:

<md-list-item layout='row' layout-sm='column' layout-align='center center' layout-wrap>
    <i class='material-icons md-avatar'>border_color</i>
    <div class='md-list-item-text'><h3>{{mainCtrl.text}}</h3></div>
    <div class='md-secondary'>
        <md-button class='md-fab md-primary md-small box red-btn'
                   aria-label='delete' ng-click='mainCtrl.deleteTodo(mainCtrl.index)'>
            <i class='material-icons small-icon'>highlight_off</i>
        </md-button>
    </div>
</md-list-item>

哪里todo.directive.js:

(function () {
    'use strict';

    angular
        .module('todoApp')
        .directive('acmeTodo', acmeTodo);

    function acmeTodo() {
        var directive = {
            restrict: 'EA',
            scope: {
                text :  '=',
                index : '='
            },
            templateUrl: 'todo.html',
            controller : 'MainController',
            controllerAs : 'mainCtrl',
            bindToController : true
        };

        return directive;
    }

})();

最后，ma​​in.controller.js:

(function () {
    'use strict';

    angular
        .module('todoApp')
        .controller('MainController', MainController);

    function MainController() {

        var vm = this;
        vm.todos = [];

        . . .

        vm.addToDo = addToDo;
        vm.deleteTodo = deleteTodo;

        //vm.todo.content is the ng-model of the input-box
        function addToDo() {
            if( vm.todo && !_.isUndefined(vm.todo.content)){
                   pushNewToDo(vm.todo.content);
            }
        }

        function deleteTodo(index) {
            vm.todos.splice(index, 1);
        }

        function pushNewToDo(todo) {
            vm.todos.push({ content : todo });
            vm.todo.content = '';
        }

    }

})();

Everything works fine except when deleting a todo. When deleteTodo is called, the function correctly receives external $index from main's ng-repeat but, can't find out why, vm.todos is empty at that moment, so, nothing gets deleted.

相反，如果我设法将所有 todo.html 内容移动到 acme-todo 位置，则一切正常。

我也尝试在指令中设置 $scope : true 而不是同时传递 text 和 $index 但我仍然遇到同样的问题。

这是一个有效的 Codepen这重现了我的问题。注意在 CodePen 上，我使用 template 而不是 templateUrl 并且我更改了图标只是为了让事情在那里正常工作。

这是实际应用程序的屏幕:

我知道，默认情况下，如果我没有指定任何 Controller ，该指令仍会选择它的范围，但是

编辑

使用 Service 或 Factory 也可以解决 this CodePen 中的问题解决了问题，但我觉得要为这么小的事情添加太多逻辑。

即使 Controller 和指令共享相同的范围，为什么我得到一个空的 todos 数组？我该如何解决这个问题并保持相同的方法(使用 todo 指令)？

Answer 1

您应该将应用程序和指令 Controller 分开，因为当您初始化指令时，您正在创建新的 Controller ，因此新的 $scope 和新的 todos 数组在本地指令内。之后，您可以将 delete 函数从主 Controller 传递给指令的 $scope。

看这里:http://codepen.io/anon/pen/zZWyLV