CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Simon Guest
Simon Guest

Reputation: 2162

Issue creating isolated scope in Angular + UI Bootstrap

I have a simple table of data, created using AngularJS. One of the columns of the table is calculated from a function on the controller.

I have a button on the page that opens a new modal. When I open a modal using UI bootstrap, I get a new isolated scope (child of the root scope), as expected. If, however, I have an input text in the modal any key-presses in this text field automatically invoke functions on the parent scope - even though I can verify that the scope is isolated.

Here is a plunkr of the behavior: http://plnkr.co/edit/JzhxSDcSefDe04Psxq0w

As shown in the example, the third column of the table is calculated with a function called "ageNextYear". When the table is being rendered, this function is called many times as expected (and can be verified in the console log). If however, I open the modal and type some text in to the field, the "ageNextYear" function on the parent scope still gets called (type some text in the input field and watch the console log output).

I'm not sure whether this is intended behavior, or whether I'm doing something wrong. I have tried using dot notation on both scopes, and explicitly passing a new scope to $modal.open, but with no joy.

I can get around the problem (by creating a watchCollection on "people" and updating the table that way - which may be a better way of doing this overall) but wanted to validate whether others have seen this behavior also.

Upvotes: 2

Views: 853

Answers (2)

Claies
Claies

Reputation: 22323

The issue you are experiencing is not related to the scope of the Modal Dialog. The issue is related to the use of a function within an ng-repeat expression. In general, using functions within expressions is a performance issue, but it's a much larger problem within an ng-repeat. according to This excellent article regarding common pitfalls of using scopes,

When using expressions in views or watchers, you should always remember that an expression is called every time AngularJS thinks it is needed. You will not get the best performance using functions, you might even miss some change events.

That means an expression…

  1. within a ng-repeat will be called for each item separately. Additionally, this is used by the repeat directive to determine data changes.
  2. Can be evaluated multiple times in one digest. This can happen when you're using multiple directives or additional scope watchers.
  3. Can be evaluated even if the direct scope seems to be unchanged.
  4. Containing a function will not be evaluated if the return value of the function changes, but only if the function definition has changed.

Your example causes 3 of these 4 to occur.

  1. You repeat the function call for each object in your scope, 3 items = 3 calls to the function.
  2. You add an additional watcher indirectly by calling the Modal Dialog.
  3. Changes to the data in the Modal Dialog's scope causes evaluation of the scope of the controller containing the ng-repeat, even though the data within the ng-repeat didn't change (no way for it to know if the data changed until the $digest is called). Each change to the Modal causes the $digest, which causes another trip through the ng-repeat, and another call for each item in the ng-repeat.

In your case, the logic does not need to run every time the expression will be evaluated. It is better to compute and write the logic into the scope when the logic result has changed. This decouples the logic from the object and the view.

in summary,

Best practices:

  • DO NOT use functions in expressions.
  • DO NOT use other data besides the scope in an expression.
  • DO use $scope.$apply() when applying external data changes.

Upvotes: 3

madhured
madhured

Reputation: 443

Simon, I liked your question and I added watch on the scope and saw the digest cycle is getting called

$scope.$watch(function watchMe(scope) { console.log('Digest watched me!'); });

The following is the fork with the digest. http://plnkr.co/edit/5PTO1uPFvmLrg7K9vzTm?p=preview

I donot know this is the reason but I think expressions inside the ng-repeat are calling the digest as it tries to evaluate expression on any event on that item.

I think we should evaluate expressions in the model and give the updated model to the ng-repeat to solve the issue.

Upvotes: 1

Related Questions