Angular nested directive communication

Question

I have a directive that look like this:

<div ng-controller="searchController" searchbar>
   <input type="text" id="searchfield" ng-model="myVar">
   <div searchresult>
       <div ng-repeat="data in data.menu | filter: myVar">
           {{data.title}}
       </div>
   </div>
</div>

There is one controller called searchController, and 2 directives called searchbar and searchresult.

How can I have the searchbar directive to run a function in searchresult directive? I was thinking to put require: "^searchresult" in searchbar directive and call it's function. Is that the correct way of doing? What if the searchresult is not available there?

Here is the detail scenario:

When user type in the input field, the search result update by the filter. Therefore the height of searchresult div is changed.

How can the searchresult directive knows about the changes of the height & run the required function instantly?

Chandermani · Accepted Answer · 2015-03-19 12:52:13Z

1

searchResult can have reference to searchBar not the other way around. As from documentation

^ - Locate the required controller by searching the element and its parents. Throw an error if not found.

Also look at ^? for optional dependencies. See compile documentation.

If you detail your scenario, we can help better.

Update: Based on the scenario that you have outlined, you can directly watch myVar property in searchresult directive and whenever it changes you can trigger the function to resize the results.

Assuming that the searchresult directive does not create isolated scope. You can try, such a code inside your directive link function

scope.$watch('myVar',function(newValue) {
   $timeout(function() {
       //do some work here
   },0);
});

Timeout helps as we cannot be sure when the rendering of the list is complete.

edited Mar 19, 2015 at 12:52

answered Mar 18, 2015 at 7:37

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

2 Comments

user1995781 Over a year ago

Thanks a lot for your answer. I have updated the question with detail scenario and I have stuck here for few days already. Hope you can give a help here. Thanks.

user1995781 Over a year ago

Thanks for the updated answer. But how can I watch myVar? How can I ensure that the function is triggered only after the result is being filtered & updated to new height? It would be great if you could show an example of code for better understanding.

Collectives™ on Stack Overflow

Angular nested directive communication

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related