Sharing isolate scope with nested directives in Angular

Question

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.

a demo in plunker would help...question is far too long and without code is hard to disect — charlietfl
– charlietfl, Commented Dec 3, 2013 at 22:46
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
– timehat, Commented Dec 4, 2013 at 18:20
please create a demo in plunker or jsfiddle.net....without code is impossible to disesct what you are trying to attempt. — charlietfl
– charlietfl, Commented Dec 4, 2013 at 20:11
I used a custom template function on the outermost directive: template: function (elem) { return '<div>' + elem.html() + '</div>'; } — timehat
– timehat, Commented Mar 27, 2014 at 16:38

Community · Accepted Answer · 2017-05-23 12:15:13Z

0

There’re 3 types of prefixes AngularJS provides.

"@" ( Text binding / one-way binding )
"=" ( Direct model binding / two-way binding )
"&" ( 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

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 21, 2015 at 21:04

Jinna Baalu

7,96740 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sharing isolate scope with nested directives in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related