Требование директивы Angularjs не находит контроллер родительской директивы

Когда мне требуется контроллер в директиве, я получаю сообщение об ошибке, говорящее, что не могу найти контроллер. См. код с проблемой ниже. http://plnkr.co/edit/NzmQPA?p=preview

Может кто-нибудь посмотреть на это?

Спасибо


person jintoppy    schedule 21.02.2014    source источник
comment
Вы можете требовать контроллер только в том случае, если у них есть отношения родитель-потомок. См. обновленный планк plnkr.co/edit/iLfc3a?p=preview.   -  person Khanh TO    schedule 21.02.2014
comment
@KhanhTO: Спасибо за это. Итак, если я хочу установить связь между двумя родственными директивами, как я могу это сделать?   -  person jintoppy    schedule 21.02.2014


Ответы (2)


Вы должны использовать службу для связи между ними. То, как и что вы делаете, зависит от ваших конкретных потребностей (в вашем посте недостаточно информации).

Примечание: я изменил ваш обработчик кликов на ng-click.

Вот пример: http://plnkr.co/edit/I2TvvV?p=preview

<div search-result-filter></div>
<div search-result-header ng-click="doClick()"></div>

angular.module('mymodule', [])
  .controller('mainCtrl', ['$scope',
    function($scope) {
      $scope.test = "main angular is working";
    }
  ]).controller('searchResultFilterController', ['$scope', 'myService',
    function($scope, myService) {
      //do something with 'myService'
    }
  ])
  .directive('searchResultFilter', [
    function() {
      return {
        replace: true,
        controller: 'searchResultFilterController',
        template: '<h1>this is the first directive</h1>'
      };
    }
  ])
  .directive('searchResultHeader', ['myService',
    function(myService) {
      return {
        replace: true,
        template: '<button>clickme</button>',
        link: function($scope, $elem, $attrs) {
          $scope.doClick = function() {
            myService.someFn();
          };
        }
      };
    }
  ])
  .service('myService', function() {
      this.someFn = function() {
        alert('this is working');
      };
  });
person Craig Squire    schedule 21.02.2014
comment
Спасибо за ответ. Когда мы используем подобное, мы просто используем услугу в качестве посредника, верно? Я хочу двустороннюю связь между этими директивами. Итак, если одна кнопка нажата в директиве1, какое-то действие должно произойти в директиве2, и наоборот. Итак, если мы используем услугу, как мы это делаем? - person jintoppy; 22.02.2014
comment
Только что увидел твой комментарий. Опять же, это зависит от того, что именно вы делаете. Допустим, вы хотите, чтобы директива 1 (D1) вносила изменения в какое-то значение, которое принимает директива 2 (D2). Одним из примеров может быть то, что D1 вызывает функцию службы для изменения некоторого значения, в то время как D2 устанавливает $watch для одного из свойств службы. Прочтите этот пост в блоге об использовании трех вариантов $watch. bennadel.com/blog/ Вы можете использовать тот же метод, чтобы D2 вызывал функцию при изменении значения в службе. - person Craig Squire; 03.03.2014
comment
Вот обновленный плункер с примером использования массива. plnkr.co/edit/I2TvvV - person Craig Squire; 03.03.2014

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

Для связи между областями вы должны попробовать $on, $emit, $broadcast. В вашем случае вам нужно внедрить rootScope в вашу директиву и транслировать событие из rootScope:

.directive('searchResultHeader', 

    function($rootScope) { //inject rootScope
      return {
        replace: true,
        template: '<button>clickme</button>',
        link: function($scope, $elem, $attrs) {
          $elem.on('click', function() {
            $rootScope.$broadcast("someEvent"); //broadcast an event to all child scopes.
          });
        }
      };
    }
  );

Любые области, заинтересованные в событии, могут подписаться на него с помощью $on:

function($scope) {
      $scope.$on("someEvent", function() { 
          alert('this is working');
      });
    }

Использование событий позволяет создавать несвязанные системы.

ДЕМО

person Khanh TO    schedule 22.02.2014
comment
Да. мы можем использовать вот так. Но хороший ли это подход? Я думаю, что angular не предлагает использовать трансляцию или излучать слишком много, верно? - person jintoppy; 22.02.2014
comment
@jintoppy: у этой проблемы есть 2 решения: использование событий и использование сервисов. Что использовать, зависит от нашего приложения. Мы используем сервисы, когда у нас есть некоторые shared свойства между областями => когда другая область изменяет эти shared свойства, все остальные области замечают изменения. В других случаях мы используем события. Я не думаю, что angular не предлагает использовать трансляцию или излучать слишком много, это должно зависеть от контекста. - person Khanh TO; 23.02.2014
comment
@jintoppy: Если в ваших директивах нет ничего общего. Я бы использовал события для создания более развязанной системы. - person Khanh TO; 23.02.2014
comment
Лично я использую события очень экономно и только в очень специфических ситуациях. Например, единственное событие, используемое в приложении, над которым я сейчас работаю, — это уведомление остальной части приложения об изменении конфигурации, чтобы каждая заинтересованная часть могла обновить свою собственную конфигурацию. - person Craig Squire; 03.03.2014
comment
@Craig Squire: на самом деле управление событиями очень полезно. Это способ создания несвязанных систем, когда вы do not have to directly depend накладываете компоненты на другие компоненты. - person Khanh TO; 04.03.2014
comment
@KhanhTO Я не согласен с тем, что они полезны, но если они являются вашим основным решением для создания слабосвязанных компонентов, велика вероятность, что вы получите спагетти-код. - person Craig Squire; 04.03.2014