Javascript 控制器内的空阵列'；从指令-AngularJS调用的s函数

我有一个相当棘手的问题，看起来很琐碎，但我没有找到一个好办法来解决它

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

我有一个main.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>

其中todo.directive.js：

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

(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;
    }

})();

(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 = '';
        }

    }

})();

最后，main.controller.js：

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

(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;
    }

})();

(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 = '';
        }

    }

})();

除删除待办事项外，所有操作都正常。当

deleteTodo

调用时，函数将正确接收来自的外部

$index

main的

ng repeat

但是，无法找到原因，

vm.todos

在 那一刻，没有任何东西被删除

相反，如果我设法将所有todo.html内容移动到

acmetodo

place，一切都正常

我还尝试在指令中设置

$scope:true

，而不是同时传递

text

和

$index

，但仍然遇到同样的问题

这是一个复制我的问题的工作。注意：在代码笔上，我使用的是

template

而不是

templateUrl

，我更改了图标，只是为了让那里的东西正常工作

下面是实际应用程序的屏幕：

我知道，默认情况下，如果我没有指定任何控制器，指令仍将选择其范围，但是

编辑

使用

服务

或

工厂

也可以解决问题，就像在中解决问题一样，但我想为这样一件小事添加太多的逻辑

---

为什么即使控制器和指令共享同一作用域，我也会得到一个空的todos数组？保持相同的方法（使用todo指令）如何解决此问题？

您应该将应用程序和指令控制器分开，因为在初始化指令时，您正在创建新的控制器，因此新的

$scope

和新的

todo

指令内部本地数组。之后，您可以将删除功能从主控制器传递到指令的

$scope

请看这里：