angularjs: force re-rendering/ full refresh a directive template

Question

This is a rewriting because of the off-topic issue:

I wrote a directive for a dropdown. I am using the directive two times as kind of a workflow. the first dropdown triggers by change action the refresh of the model of the second one. though the model updates correctly, the view does not. the many times you select items in dropdown one the second dropdown shows old items with new items, eventhough the console.log() of the angular model is correct.

the view has infinite recursion. Using ng-include with an id of a ng/template that does recursion about it self:

my initial plunkr showing the template code is this: http://plnkr.co/edit/jera17uCluGsFs8o5hRG?p=preview

I did not understand why the view does not fully refresh?

to be updated.

kind regards, alex

Solution

Typically what I do is use ui-if directive which is basically an if statement made by angularui team so I'll put it on the element that is also the directive and say something like:

<div ui-if="mydata.prop" my-custom-directive></div>

This way if myData.prop changes or I set it to null briefly then reapply it it will remove and then transclude my html directive back into the DOM causing it to eval my directive again.

Comments

[Michael Benford]

Could you provide a Plunker/jsFiddle script?

[sp33c]

I could not get to work in plunker so quick... but the basic code is there...

[sp33c]

plnkr.co/edit/jera17uCluGsFs8o5hRG assume the directive vissible is the second dropdown, that gets updated on state of first dropdown... anytime its model changes, the model is correct, but renders quite wrong. I think it is an issue with the infinite nesting. that works as plain angular code.

[sp33c]

dl.dropboxusercontent.com/u/21600359/… It will than look something like this...

[sp33c]

is ng-if similar in regards to force re-rendering?

[sp33c]

could it be a cache issue, because I use ng/template in directive?

[btm1]

I'm not sure if ng-if will work the same way ui-if does for this. Angular may have implemented theirs in a diff way. Basically ui-if works because it's exiling it to shadow dom and then it compiles it back in causing it to re-render.

[btm1]

caching would only be an issue if the template its self is changing like if i make some edits to a template in sublime text 2 sometimes it caches the template and I have to open just that template in a new tab and then shift+refresh to get it to update. If the data in the template isn't updating that usually means that somehow it's losing reference to the original object in angular. This can happen if you override the original reference or if you somehow are creating a new scope and don't realize it.

[sp33c]

solved: ng-if is doing the trick as well. but the error is actually that ng-include and ng-repeat are in the same line. ng-include itself is not decicive, only ng-switch is.