從子指令調用模塊控制器功能

我想創建一個指令，點擊後，調用在模型的控制器函數中聲明的函數。

JS：

angular.module('tasks', []) 
.controller('taskCtrl', function($scope){ 
    $scope.complete = function(){ 
     console.log('parent function'); 
    } 
}) 
.directive('taskList', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      complete: '&' 
     }, 
     template: '<button ng-click="complete()">Complete Task</button>', 
     controller: function($scope){ 
      /*$scope.complete = function(){ 
       console.log('child function'); 
      }*/ 
     } 
    } 
});

HTML：

<div ng-app="tasks"> 
    <task-list></task-list> 
</div>

我看了其他Q /作爲SO，發現這似乎是最通用的解決方案，儘管它永遠不會調用taskCtrl控制器中的complete（）函數。但是，如果未註釋，它將從指令的控制器調用complete（）函數。我錯過了什麼？

來源

2014-10-28 Prusprus

您需要設置fu nciton綁定（for'complete：'＆''）。 '' – PSL 2014-10-28 18:22:22

你需要寫HTML如下：

<div ng-controller="taskCtrl"> 
    <task-list complete="complete()"></task-list> 
</div>

這裏是鏈接到更新的小提琴http://jsfiddle.net/paila/vnj62xn8/4/

來源

2014-10-28 18:25:30

我已經更新了jsfiddle，但它仍然不會碰到父函數：http://jsfiddle.net/vnj62xn8/2/ – Prusprus 2014-10-28 18:29:43

更新了答案。你缺少ng-controller =「taskCtrl」div。 – 2014-10-28 18:38:23

這有效。謝謝你的幫助。如果我可以問你另一個問題，因爲我試圖將這個實現到我的項目 - 下面的jsfiddle http://jsfiddle.net/vnj62xn8/5/我的指令/控制器是子模塊的一部分，但我不能找到他們了。我究竟做錯了什麼？ – Prusprus 2014-10-28 18:48:35

只需將您的代碼更改爲：

.directive('taskList', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      complete: '&' 
     }, 
     template: '<button ng-click="complete()">Complete Task</button>', 
     controller: 'taskCtrl' // Here you are referencing the taskCtrl 
    } 
});

你只需要參考您現有的控制器內的控制器分配

來源

2014-10-28 18:35:16

謝謝，這適用於我的示例。但是，是否可以讓您的指令定義其控制器，同時從模塊的控制器擴展功能？ – Prusprus 2014-10-28 18:37:57

從子指令調用模塊控制器功能

回答

相關問題