Angular prevent filter call in ng-mouseover

I have Angular web application and there are links like this:

<a id="{{ model.name }}" href="{{ model.url }}" 
   ng-bind="model.name | active_menu: model.name" 
   ng-click="click_on_model(model.name)"> 
   ng-mouseover="hover(model.name")
</a>

Why everytime active_menu filter calls when ng-mouseover executes? How to prevent it and execute filter only before rendering.

Thank you

Answers


AngularJS is unable to predict that the return value of a filter is the same every time it is executed. So calling anything on the scope will re-trigger all the visible filters. Although Angular is very very fast in general, this can be bad for performance if you have used some expensive filters, but it can also cause infinite digest loops, which are quite annoying.

For these reasons I always try to avoid using filters. In your case you probably just need to display a menu item in a different way if it's active. I've made a plunker that demonstrates this behaviour in more detail.


Need Your Help

How to associate unique threadID per execution with log4net output?

c# .net log4net

I'm using log4net, and when i log messages my threadID will be duplicated inside my file.. i want it to be a uniqueID whereby it never exists twice in the file so that it will make it easy for sear...