Übergeben Sie Argument zwischen übergeordneten und untergeordneten Anweisungen

Question

Ich habe übergeordnete Direktive für Navigationsmenü und untergeordnete Anweisungen für Menüverknüpfungen. So etwas wie das:

In Menürichtlinie verwende ich ng-transluzent, um HTML hinzufügen zu können. Gibt es eine Möglichkeit, Argumente aus dem Menü an alle Menü-Link-Elemente zu übergeben? Wenn zum Beispiel:

<menu ng-disabled='true'.. 

Ich mag alle Menü-Link-Richtlinien, diesen Wert von den Eltern zu bekommen. Eine weitere Sache: Jeder Menü-Link hat seine eigenen Attribute, also muss er einen eigenen Bereich haben.

Answer 1

Sie können require verwenden, für weitere Informationen lesen Sie die angular directive doc.

Siehe das Beispiel für weitere Informationen:

angular.module('myApp', []) 
 
    .controller('MyController', MyController) 
 
    .controller('MyDirectiveController', MyDirectiveController) 
 
    .directive('myDirective', myDirective) 
 
    .directive('childDirective', childDirective) 
 

 
function MyController($scope) { 
 

 
} 
 

 
function MyDirectiveController($scope) { 
 
    this.isDisabled = function() { 
 
    return $scope.disabled; 
 
    }; 
 
} 
 

 
function myDirective() { 
 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    template: '<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>', 
 
    scope: { 
 
     disabled: '=?ngDisabled' 
 
    }, 
 
    controller: 'MyDirectiveController' 
 
    }; 
 
} 
 

 
function childDirective() { 
 
    return { 
 
    restrict: 'E', 
 
    require: '^^myDirective', 
 
    template: '<div>childDirective disabled: {{ disabled }}</div>', 
 
    scope: {}, 
 
    link: function(scope, elem, attrs, myDirectiveCtrl) { 
 
     scope.disabled = myDirectiveCtrl.isDisabled(); 
 
    } 
 
    }; 
 
}

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

 
<div ng-app="myApp"> 
 

 
    <div ng-controller="MyController"> 
 
    <my-directive ng-disabled="true"> 
 
     <child-directive></child-directive> 
 
     <child-directive></child-directive> 
 
    </my-directive> 
 
    </div> 
 

 
</div>