Angular JS: ng-include by function

Question

I am having strange experience while using ng-include. I am trying to get template path by triggering a function defined in controller which is returning path as per parameter passed. Here is my code-

<tr ng-repeat="detail in Ctrl.details" ng-include="Ctrl.getTemplate(object)"></tr>

Contoller-

self.getTemplate = function (obj) {
    if (<condition>) {
        return 'view1';
    } else return 'view2';
};

This is working really fine, but I observed really strange behavior while debugging the code. In my table row I am having 3 buttons and I applied Bootstrap tooltip on them. Whenever I hover them tooltip comes up & on mouse left getTemplate() gets called. Do anybody know why this is happening?

Angularjs does checks on ng-include , ng-model fields etc... each time it thinks the value may have changed. The best is to store the url in an object, so the function will not be called 50 times (for example object.__url). — anotherdev
– anotherdev, Commented Feb 17, 2016 at 9:41
Also please note that ng-include is deprecated in angular 2. — Wtower
– Wtower, Commented Feb 17, 2016 at 9:59

martin · Accepted Answer · 2016-02-23 07:02:38Z

1

This is expected behaviour.

Have a look at this article. Angular needs to check whether the expression for ng-include has changed or not. In order to do that it needs to evaluate Ctrl.getTemplate(object) on every digest loop because there's no other way to find out whether its return value has changed and therefore it needs to pass a new value to ng-include.

edited Feb 23, 2016 at 7:02

answered Feb 17, 2016 at 9:41

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

Collectives™ on Stack Overflow

Angular JS: ng-include by function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related