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父功能沒有被子組件調用

回答

相關問題