如何强制更新ng-init？

Question

I found that ng-init is not updated after rowIndex is updated.

<div ng-init="item = getItem(rowIndex)">
   {{ item.Name }} 
</div>

item is not updated after rowIndex is changed (even if changes are made with $timeout)

Is there other directive that allows to avoid using the following dirty trick:

<div ng-repeat="item in [getItem(rowIndex)]">
   {{ item.Name }} 
</div>

Answer 1

ngInit does not update. It's a one-shot directive. You should just call the function from within the curly braces, since you are wanting to watch for changes to rowIndex :

<div>
  {{ getItem(rowIndex).Name }}
</div>

This could hurt performance on large lists, since getItem will be called on every digest cycle, but it's easy to read.

https://plnkr.co/edit/cZ2SG6nf2SufdAWe1ye7?p=preview

Answer 2

Another approach is to set the variable inside a bogus attribute:

<div x="{{item = getItem(rowIndex)}}">
    {{ item.Name }} {{item.Value}}
</div>

On each digest cycle the value of item will be updated.

In this case where item has more that one property, the getItem function needs to be invoked only once.

Keep in mind that it would be even more efficient for the controller to update the value of item only once when rowIndex changes instead of invoking the getItem function every digest cycle.

---

Avoid using ng-init

Avoid using ng-init . It tangles the Model and View, making code difficult to understand, test, debug, and maintain. Instead initialize the Model in the controller.

From the Docs:

ngInit

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit , such as for aliasing special properties of ngRepeat , as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

— AngularJS ng-init Directive API Reference

Answer 3

Based off your question title I'd say this article could be another good resource to go over for you. Angular has a pretty good variety of lifecycle hooks (which is all ngInit is).

I'm not sure of the context of your project but it sounds like ngDoCheck could be useful for what you're trying to achieve.

ngDoCheck − This is for the detection and to act on changes that Angular can't or won't detect on its own.

https://www.tutorialspoint.com/angular2/angular2_lifecycle_hooks.htm

Hope this helps!