Невозможно вызвать метод родительского контроллера из директивы

Я видел много, много, много, много вопросов по этой проблеме, но по какой-то причине я все еще не могу связать ng-click в моей директиве к методу на родительском контроллере. Я почти уверен, что у меня есть правильная изоляция области видимости и передача параметров метода, но пока не повезло. Грубое упрощение (это огромное приложение) моего JS выглядит так:

angular.module('myApp', []);

angular.module('myApp').directive('myCustomDirective', customDirective);

function customDirective() {
  return {
    restrict: 'E',
    scope: {
      myCallback: '&myCallback'
    }
    template: '<div><h3>My directive</h3><p>I am item {{itemIndex}}</p><button ng-click="myCallback({itemIndex: itemIndex})">Click to call back</button></div>'
  }
}

angular.module('myApp').controller('myController', myController);

function myController() {
  var vm = this;
  vm.selectedIndex = -1;

  vm.items = [0, 1, 2, 3, 4];

  vm.callbackMethod = function(itemIndex) {
    vm.selectedIndex = itemIndex;
  }
}

и аналогично упрощенная разметка выглядит следующим образом:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController as test">
      <p>Selected item: {{test.selectedIndex}}</p>
      <my-custom-directive my-callback="test.callbackMethod" ng-repeat="item in test.items" ng-init="itemIndex = $index"></my-custom-directive>
    </div>
  </body>

</html>

Я в недоумении, потому что я следил за каждым SO сообщением и блогом на эту тему и до сих пор ничего. Хуже того, Plunk, который я сделал для иллюстрации этой проблемы, тоже не работает ($injector:nomod) - бонусные баллы, если кто-то может определить почему!;-)

Источник

2 ответа

Решение

Вы должны определить метод с параметром, а не помещать его в ссылку на элемент директивы.

my-callback="test.callbackMethod(itemIndex)"

Также передайте текущий индекс элемента в директиву, добавив его в изолированную область.

scope: {
  myCallback: '&myCallback',
  itemIndex: '='
},

Демо Здесь

Связанный ответ

Источник

Я добавил дополнительный атрибут в вашу директиву и удалил ng-init.

 <my-custom-directive my-callback="test.callbackMethod($index)" ng-repeat="item in test.items track by $index" theindex="$index"></my-custom-directive>

пример

Источник
Другие вопросы по тегам