Функция контроллера модуля вызова от дочерней директивы

Question

Моя первая попытка на угловой.

Я пытаюсь создать директиву, которая при щелчке вызовет функцию, объявленную в функции контроллера модели.

Вот мой упрощенный код: http://jsfiddle.net/vnj62xn8/

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 и обнаружил, что это, кажется, быть наиболее обобщенным решением, хотя он никогда не вызовет функцию complete(), найденную в контроллере taskCtrl. Однако он будет вызывать функцию complete() из контроллера директивы, если он не подписан. Что мне не хватает?

Answer 1

Вам нужно написать HTML следующим образом:

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

Вот ссылка на обновленную скрипку http://jsfiddle.net/paila/vnj62xn8/4/

Answer 2

Просто измените код:

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

Вам просто нужно ссылаться ваш существующий контроллер внутри назначения контроллера