0

Here's a strange behavior I want you to help me to examine: http://jsfiddle.net/m3Z8r/2/

I'm curious about why Angular calls symbolsLength() function more times that I've expected:

  1. From the first time it was called twice (was expected to be called only once)
  2. When switching from template1 to template2 it fires again (but there's no obvious need)

If you set initial templateName to "template2", function symbolsLength() will not be called, which is fine.

Please, can someone explain me what's going on here?

P.S. I understand that there's no need in symbolsLength() function since we can just write {{ symbols.length }}, but let's pretend that this function does something very important, for example, contacting service.

Yuriy Bogdanov
  • 3
  • 1
  • 1
  • `symbolsLength()` will be called every time the view needs to be re-rendered. Changing between templates or changing properties on your model forces a re-render. – bmleite Feb 01 '13 at 15:48
  • Yes, but why it called _twice_ when render `template1`? – Yuriy Bogdanov Feb 01 '13 at 15:59
  • angularjs may call any function bound in the view at any point during digest phase and multiple digest phases might be executed. It makes no guarantee about the number of calls. This makes a good point to always have your view bound functions side-effect free. – Liviu T. Feb 01 '13 at 16:01
  • Ok. Can someone explain me why `symbolsLength()` is called exactly _twice_ each time I enter new character into the input? Simplified example: [http://jsfiddle.net/m3Z8r/3/](http://jsfiddle.net/m3Z8r/3/) – Yuriy Bogdanov Feb 01 '13 at 16:21

1 Answers1

1

1. From the first time it was called twice (was expected to be called only once)

I stepped through the code and saw that this is because each watch function that is created for any binding holds a last value property and in the first phase the last value is different than the expression value which sets the dirty flag to true thus triggering a new pass.

2. When switching from template1 to template2 it fires again (but there's no obvious need)

I doesn't matter that the scope value hasn't changed once a new template is included new watches are created so step 1. is repeated

Community
  • 1
  • 1
Liviu T.
  • 23,584
  • 10
  • 62
  • 58
  • And why symbolsLength() is called _exactly twice_ each time I enter new character into the input? Simplified example: [http://jsfiddle.net/m3Z8r/3/](http://jsfiddle.net/m3Z8r/3/) – Yuriy Bogdanov Feb 01 '13 at 20:15
  • It seems that each time the value that is tied to that function changes it the dirty flag is set to true in the first digest phase – Liviu T. Feb 01 '13 at 20:51
  • Actually the idea is this: if you have a interpolated function call then in order to "get" the value so it can compare to the old value it will execute it THEN it will trigger a dirty check so the loop will execute again noting that the value hasn't changed but still calling it to check – Liviu T. Feb 01 '13 at 20:54
  • take a look at http://stackoverflow.com/questions/9682092/databinding-in-angularjs also angularjs is about dirty checking vs model changes -> immediately update listeners that means that sometimes in case of functions it actually needs to execute it to get the values needed to determine change – Liviu T. Feb 01 '13 at 20:59