Sharing isolate scope with nested directives in Angular

3
votes

I want to have a custom directive that is reusable and creates an isolate scope so it can be used anywhere (as long as the consumer uses the API defined by the directive). Then, I want the consumer to easily be able to mix and match different reusable pieces that fit within the main reusable directive.

The situation I'm working with is a drop down menu. The main directive would isolate the scope and define the API for the dropdown as a whole. The inner directives would allow the consumer to choose whether they want a button that opens the menu, a search box/input field that opens the menu, etc. Then they could also choose what menu style is used:

<dropdown items="..." selected-item="...">
  <dropdown-button>(Transcluded button text here)</dropdown-button>
  <dropdown-icon-list></dropdown-icon-list>
</dropdown>

The parent directive/controller would handle state/communication for the inner pieces (ie. the button might trigger the "open" state, and the list would respond by opening). In other words, the parent directive would provide a single place for the consumer to define behavior and isolate scope from the rest of the page, while the nested directives would change shared state/respond to changes in shared state based on their role.

I actually had this working by using an isolate scope on the main "dropdown" directive and then inheriting scope with the nested directives (didn't specify "scope: ..." on the nested directives). But, with Angular 1.2, things have changed such that the isolate scope of the parent is truly isolated--the children inherit the scope that exists outside the parent directive, rather than sharing its isolated scope.

What is the Angular way to accomplish such a thing?

I've started retrofitting my existing code to share the controller from the parent directive with the nested children, but I feel that's the wrong way to go once I get into the situation where the children need to listen for changes on the shared scope... The only way I can see to do that would be to pass a callback function from the nested directives into the shared controller which it would bind to a $scope.$on method. Seems like the wrong path to head down.

1
angularjsangularjs-directiveangularjs-scope
a demo in plunker would help...question is far too long and without code is hard to disect – charlietfl
Yes, I was worried about that. In essence, the question is: how do I create a directive that provides a certain piece of reusable functionality, but allow the consumer to tell that directive which delegates to use to accomplish certain pieces of the overall functionality. I think I may have a solution that'll work for me, which is to use transclusion (and my own custom compile function) so I can make the scope of the parent available to the children. I'll post a solution with some code examples if I get it figured out. – timehat
please create a demo in plunker or jsfiddle.net....without code is impossible to disesct what you are trying to attempt. – charlietfl
Did you ever find a good way to do this? – Hoopes
I used a custom template function on the outermost directive: template: function (elem) { return '<div>' + elem.html() + '</div>'; } – timehat

1 Answers

0
votes

There’re 3 types of prefixes AngularJS provides.

  1. "@" ( Text binding / one-way binding )
  2. "=" ( Direct model binding / two-way binding )
  3. "&" ( Behaviour binding / Method binding )

All these prefixes receives data from the attributes of the directive element and provide communication between directives. please visit below link for similar question.

Visit https://stackoverflow.com/a/33024209/4348824