Получить доступ к контроллеру из дочерней директивы в AngularJS

Question

У меня есть небольшое угловое приложение, которому необходимо перечислить список сущностей (конечные точки в моем случае). Объекты сохраняются в массиве. Для целей этого примера предположим, что они находятся на контроллере.

Чтобы лучше отделить логику, я создал две директивы: endpointList и конечную точку, как это:

директивы, объявленные как это:

myApp.directive('endpointList', function() { 
     return { 
      restrict:'EA', 
      controller:'EndpointCtrl', 
      controllerAs:'epCtrl', 
      transclude: true, 
      replace: true, 
      templateUrl: 'endpoint-list.html' 
     }; 
    }) 
    .directive('endpoint', function ($compile, $log) { 
     return { 
      scope: { 
       scope:'=ngModel', 
       func:'&', 
       index:'@' 
      }, 
      restrict:'EA', 
      replace:true, 
      templateUrl: 'endpoint.html', 
      require:'?^endpointList', 
      compile: function(tElem, tAtt) { 
       return function(scope, el, attr, ctrl) { 
        // ctrl.addResource(scope); 
       } 
      } 
     }; 
    }); 

шаблон для endpoint-list.html

... 
<section> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th><input type="checkbox" ng-model="selectAll" ng-click="toggleSelectAll()"/></th> 
       <th>Label</th> 
       <th>Last updated</th> 
       <th>Status</th> 
       <th>Sync</th> 
      </tr> 
     </thead> 
     <tbody ng-transclude></tbody> 
    </table> 
</section> 
... 

шаблон для endpoint.html:

... 
<td> 
    <a ng-click="sync()" class="glyphicon glyphicon-cloud">CALL ME</a> 
</td> 
... 

и я использую их, как это:

<endpoint-list> 
    <endpoint ng-repeat="ep in endpoints" scope="ep" ng-model="ep" func="selectEp(scope)" index="{{$index}}"></end-point> 
</endpoint-list> 

Моя проблема заключается в том, что в endpoint.html у меня есть ссылки, при нажатии, я хочу, чтобы вызвать функцию синхронизации() на контроллере :

$scope.sync = function(endpoint) { 
    console.log('syncing:'); 
    console.log(endpoint); 
}; 

Как это сделать? Любые советы приветствуются.

Вот plunkr: http://plnkr.co/edit/js7syyZ8u0i9KoOIgwdQ

Answer 1

Вы можете создать службу в качестве среднего человека, вводят его в оба контроллера и директивы, и это все. Вы сможете вызвать метод этой службы непосредственно из шаблона вашей директивы, при условии, что ваш контроллер имеет ссылку на вашу службу.

myApp.service("middleManService", function() { 
    this.sync = function(endpoint) { 
     console.log('syncing:'); 
     console.log(endpoint); 
    }; 

     this.test = 'blah'; 

     this.selectAll = false; 
     this.deleteBtnVisible = false; 
     this.editBtnVisible = false; 

     this.endpoints = [ 
      { 
       label: '2.2.0', 
       url: 'https://version-2_2_0-api.company.com/test/test?api_key=xxx', 
       selected: false 
      }, 
      { 
       label: '2.3.0', 
       url: 'https://version-2_3_0-api.company.com/test/test?api_key=xxx', 
       selected: false 
      } 
     ]; 
    }; 
}); 

Добавить ссылку на эту услугу к контроллеру:

myApp.controller('EndpointCtrl',  
    function ($scope, middleManService) { 
     $scope.middleManService = middleManService; 

, а затем в вашем HTML, назовем его так:

<td> 
     <a ng-click="middleManService.sync()" class="glyphicon glyphicon-cloud">CALL ME</a> 
    </td>