Как вызвать функцию ссылки на родительскую директиву из функции ссылки дочерней директивы

Question

У меня есть две директивы: directiveA и directiveB как с функциями link. Как я могу назвать функцию, принадлежащую directiveA, от directiveB?

Путь я мой код настроен так далеко:

angular.module('myApp').directive('directiveA', function() { 
    return { 
     templateUrl: 'directiveA.html', 
     link: function (scope) { 
      scope.directiveAAlert = function() { 
       alert('This is A'); 
      } 
     } 
    } 
}); 

angular.module('myApp').directive('directiveB', function() { 
    return { 
     scope: { 
      onButtonClicked: '=' 
     } 
     templateUrl: 'directiveB.html', 
     link: function (scope) { 
      scope.showAlert = function() { 
       scope.onButtonClicked(); 
      } 
     } 
    } 
}); 

В directiveA.html:

<directive-b onButtonClicked='directiveAAlert'></directive-b> 

В directiveB.html:

<button ng-click='showAlert()'></button> 

Но когда я нажимаю кнопку, Я получаю сообщение об ошибке TypeError: scope.onLogInButtonClicked is not a function at Scope.link.scope.showAlert.

Как просто определить и вызвать эту же функцию из дочерней директивы?

Answer 1

Вы должны использовать require вариант директивы, где вы можете упомянуть другую директиву будет на том же элементе, или это может быть мой родитель, используя ^ внутри require свойство в директиве API. Когда вы использовали require: ^parentDirective, который даст вам доступ к контроллеру parentDirective в функции связи childDirective, который требует его.

Кроме того, вам необходимо исправить шаблон html, который должен иметь атрибуты как -, отделенные заменой его чехла.

directiveA.html:

<directive-b on-button-clicked='directiveAAlert()'></directive-b> 

directiveB.html

<button ng-click='showAlert()'></button> 

Код

angular.module('myApp').directive('directiveA', function() { 
    return { 
     templateUrl: 'directiveA.html', 
     link: function (scope) { 
      //code here 
     }, 
     controller: function($scope){ 
      scope.directiveAAlert = function() { 
       alert('This is A'); 
      } 
     } 
    } 
}); 

angular.module('myApp').directive('directiveB', function() { 
    return { 
     scope: { 
      onButtonClicked: '=' 
     }, 
     require: '^directiveA', 
     templateUrl: 'directiveB.html', 
     link: function (scope,element,attrs, ctrl) { 
      scope.showAlert = function() { 
       ctrl.onButtonClicked(); //ctrl has access to the directive a controller. 
      } 
     } 
    } 
});