如何從子指令的鏈接函數調用父指令鏈接函數

Question

我有兩個指令，directiveA和directiveB都帶有link函數。如何從directiveB調用屬於directiveA的功能？

我有我的代碼，成立迄今的方法是：

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選項，你可以提其他指令將相同的元件上，或者也可能是使用指令API ^內require物業我的父母。當您使用require: ^parentDirective時，將允許您訪問需要它的鏈接功能childDirective中的parentDirective控制器。

此外，你需要糾正你的模板html應該有屬性爲-取代它的​​cammelcase情況分開。

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. 
      } 
     } 
    } 
});