AngularJS ES6父功能没有被子组件调用

我对Angular 1.x的ES6语法/结构有点新了，而且我遇到了将父控制器的函数传递给子组件的问题控制器。AngularJS ES6父功能没有被子组件调用

这是应用程序是如何联系在一起（我用的WebPack +巴贝尔以此为入口点）：

const requires = [ 
    'ngRoute', 
]; 

//App 
angular.module('kanban',requires) 
    .controller('dashboardCtrl', dashboardCtrl) 
    .component('board', board) 
    .component('task', task) 
    .config(routes);

在我的路线，我有一个单一的路线，这是我的“父”

export default function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      template: dashboardTemplate, 
      controller: 'dashboardCtrl', 
      controllerAs: '$ctrl', 
     }); 
}

谁控制器看起来是这样的：

export default function($rootScope) { 
    $rootScope.title = 'Kanban'; 
    let _this = this; 

    this.boards = [ 
     { 
      _id: 'b1', 
      title: 'backlog', 
      tasks: ['t1', 't2'], 
     } 
    ]; 

    this.deleteBoard = function(board) { 
     console.log(board); 
     let index = _this.boards.indexOf(board); 
     if (index !== -1) { 
      _this.boards.splice(index, 1); 
     } 
    };

而且在模板中，孩子与创建NG-重复，传递函数

<board ng-repeat="board in $ctrl.boards" board="board" onDelete="$ctrl.deleteBoard(board)" ></board>

和板结合属性作为函数具有&

export const board = { 
    template: boardTemplate, 
    controller: boardCtrl, 
    bindings: { 
     board: '=', 
     onDelete: '&', 
    } 
};

而功能被添加到所述控制器的不同功能中：

export default function boardCtrl() { 
    let _this = this; 

    this.deleteBoard = function(){ 
     console.log(_this.onDelete); 
     _this.onDelete({board: _this.board}); 
    }; 
}

然后点击打电话：

<button ng-click="$ctrl.deleteBoard()"></button>

我能达到板（子）控制器的功能，它打印此控制台：

function (locals) { 
    return parentGet(scope, locals); 
}

，并返回没有错误，但在父deleteBoard功能的console.log不会被调用。

这里发生了什么？为什么孩子似乎认识到它正在调用父范围内的某些东西，但没有达到它？

来源

2017-05-26 efong5

也许是因为使用相同的'$ ctrl'命名空间？ – Ioan

@loan我试过不同的'controllerAs：'来改变命名空间，但它不会影响行为！ – efong5

你能在小提琴中重现这种行为吗？ – Ioan

原来，这个问题是因为怎样的属性，在父模板，命名其中

<board onDelete="$ctrl.deleteBoard(board)"></board>

需要进行的，而不是以下：

<board on-delete="$ctrl.deleteBoard(board)"></board>

即使属性绑定为子控制器上的“onDelete”。

来源

2017-05-29 18:42:06 efong5

AngularJS ES6父功能没有被子组件调用

回答

相关问题