CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
timehat
timehat

Reputation: 135

Sharing isolate scope with nested directives in Angular

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.

Upvotes: 3

Views: 571

Answers (1)

Jinna Baalu
Jinna Baalu

Reputation: 7809

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

Upvotes: 0

Related Questions