ng-if Function Gets Called on Click

Question

I have my code on Plnkr:

http://plnkr.co/edit/6wz4zub2sEOfhrqps0c8

The html code is quite simple:

   <div ng-app="myApp" ng-controller="MainCtrl">
     <div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>
       <div ng-repeat="item in Items">
         <item-input></item-input>
       </div>      
     </div>
   </div>

Basically, the problem is my function in ng-if gets called every time I click anywhere on the page. I think it has something to do with the multi-select control but I'm not sure where I should fix it. Any help is appreciated.

Thanks.

UPDATED

What I don't really understand is why this behavior stops when I comment out the multi-select dropdown (<div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>)?

A click triggers a digest cycle therefore the function `displayMe` binded to the `ng-if` directive is evaluated — Michel, Mar 17 '15 at 00:21
Indeed there is no bug, this is just how Angular works, so make sure all your bindings are fast to compute. — floribon, Mar 17 '15 at 00:27
I would recommend for you NOT to attempt to control the number of times of evaluating in some directive(including ng-if). Angularjs triggers 'digest loop' when it is needed to auto data binding which provides us big advantages. — yazaki, Mar 17 '15 at 00:33
@MichaelP. I can understand a click triggers a digest cycle. However, how come when I remove the multi-select dropdown by commenting out
this behavior stops? — notlkk, Mar 17 '15 at 01:33
Actually not *every* click triggers a digest : if there is no evaluation of an event handler that could potentially change the model, there is no reason to do dirty checking. By removing the dropdown you removed two click handlers (one bound on the dropdown and one bound on the whole document). With only the text inputs in the document I can trigger digests by typing something, which is quite logical. My first comment should have been : The click event triggered a handler, which in turn triggered a digest, therefore the function `displayMe` is evaluated. — Michel, Mar 17 '15 at 02:10

score 2 · Accepted Answer · edited May 23 '17 at 11:56

As shown in the picture below, taken from Chrome DevTools, the multi-select dropdown is generating two click event handlers :

enter image description here

One event is on the button and one on the whole document. Therefore, a click on the document is triggering at least that last event handler, which potentially changes the model. Angular then do a digest cycle, and that implies that the displayMe function bound to the ngIf directive is evaluated in case the element should be removed of the DOM or not.

If you remove the dropdown component, and thus these two click handlers, you are left with 3 text inputs. Indeed, now there are no digest after a click on the document because no handler are executed, but you can still trigger digests essentialy by typing inside the input elements.

This answer by Miško Hevery has some valuable info about the dirty-checking process in Angular 1.x.

ng-if Function Gets Called on Click

1 Answers1