0

I have parent directive for navigation menu and child directives for menu links. Something like this:

<menu>
  <menu-link />
  <menu-link />
</menu>

In menu directive I use ng-translucent to be able to add html. Is there any way to pass argument from menu to all menu-link elements? For example, if:

<menu ng-disabled='true'..

I want all menu-link directives to get that value from parent. One more thing: each menu-link have its own attributes, so it needs to have own scope.

Filip Witkowski
  • 795
  • 3
  • 14
  • 24

1 Answers1

1

You can make use of require, for more info read the angular directive doc.

Refer the example for more info:

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>
Gaurav
  • 1,233
  • 14
  • 23
  • That looks beautiful, but what if I have each directive in different module and I cannot change it? For example: `angular.module('menu.directive',[]).directive('menu', fucntion....` and `angular.module('menu.link.directive',[]).directive('menuLink', fucntion....` I didn't write this, but still I cannot change it. – Filip Witkowski Mar 15 '17 at 19:10
  • When you mention `In menu directive I use ng-translucent to be able to add html.`, it doesn't sound that you are not the author or for the matter of fact will not be able to change the implementation. Please try to post the question in a clear tone, this way it will be easy for others to understand your question and reply to it. Regarding your first question i.e. `each directive in different module`, it doesn't matter as the `require` looks up the `DOM` to find the parent controller as we have mentioned `require: '^^myDirective'` notice the *^^*. – Gaurav Mar 16 '17 at 03:07
  • And regarding your second question i.e. `I cannot change it`, I can't comment much on this as I don't know the source code, but one thing I can say modify it if you can, or else please have a look at Decorator pattern @ https://en.wikipedia.org/wiki/Decorator_pattern. Angular also provides similar thing called Angular Decorators, have a look at this https://docs.angularjs.org/guide/decorators. Using decorators you can modidy the existing behaviour or add a new one. – Gaurav Mar 16 '17 at 03:12
  • ... or add a new one without modifying the original source code. – Gaurav Mar 16 '17 at 03:39
  • Thanks, I'm looking into decorators now. When I try to add `require='^^menu'`, I get error: https://docs.angularjs.org/error/$compile/ctreq?p0=menu&p1=menuLink – Filip Witkowski Mar 16 '17 at 14:34
  • I'm modifying that code to have same structure as in your answer, I even moved everything to same module, but I still get **myDirectiveCtrl** _undefined _, when I try to log it to console in that child directive link function. Might it be because we use Angular 1.5.3? – Filip Witkowski Mar 23 '17 at 20:05
  • I added follow up question [here](http://stackoverflow.com/questions/42986855/parent-directive-controller-undefined-when-passing-to-child-directive). Once I figure it out, I will mark your answer as accepted. – Filip Witkowski Mar 23 '17 at 21:00
  • My apologies, I just saw your question but I see you already got the answer. P.S.: The jsfiddle/plunker/codepen code snippet will always help. – Gaurav Mar 24 '17 at 05:53
  • Added another follow up question here: http://stackoverflow.com/questions/43128652/child-directive-not-updated-when-parent-directive-property-changes – Filip Witkowski Mar 30 '17 at 21:27