Transclusion on UI view not working on IE9-10-11

[mimo84]

On IE9-10-11 if you put some html content into an ui-view directive, the content is correctly shown at the first attempt, but not when you come back to the same status. The same code works fine on Firefox and Chrome.

I created a plunker to show the issue:
http://plnkr.co/edit/hz6jY4Jus7OAj3YXeboH?p=preview

This is the error I get:

Error: Invalid argument.
at buildFragment (http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:5:22624)
at domManip (http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:5:20986)
at append (http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:5:18973)
at restore (http://run.plnkr.co/Q8grRKnigCnHtY9D/ui-router.js:1252:54)
at updateView (http://run.plnkr.co/Q8grRKnigCnHtY9D/ui-router.js:1306:13)
at eventHook (http://run.plnkr.co/Q8grRKnigCnHtY9D/ui-router.js:1276:17)
at $broadcast (http://code.angularjs.org/1.2.3/angular.js:11943:15)
at Anonymous function (http://run.plnkr.co/Q8grRKnigCnHtY9D/ui-router.js:1067:9)
at wrappedCallback (http://code.angularjs.org/1.2.3/angular.js:10689:15)
at wrappedCallback (http://code.angularjs.org/1.2.3/angular.js:10689:15)

[timkindberg]

I've identified two aspects of the issue. First, IE doesn't like doing an appendChild call with an EmptyTextNode, that is what creates the actual error. So I removed all whitespace in this plunkr which removes the error, but now the h3 and p tag are put back but with no text content. Will continue to investigate.

[timkindberg]

Ok I think this is beyond me at this point. I think it may be a bug with the transclude function in angular core, but I'm not able to say.

[mimo84]

Uhm... I see, any idea to reproduce the issue using just core AngularJS to report the bug?

[JGarrido]

I can confirm this to be a valid issue. I've forked @mimo84's plunker, stripped out some of the other JS references, and included references to the latest releases of both Angular and ui-router:

http://plnkr.co/edit/rED7zEqK3rWDahU2NKpC

[nateabele]

The next release won't use transclusion. Can you try testing against HEAD?

[JGarrido]

@nateabele Preliminary testing looks good - I'm able to view content on previous states (using IE10 on Windows 8), with no apparent regressions. Good job, and many thanks! We may be able to go to Production with this plugin after all. 👍

The next milestone seems to be 0.3.0. Do you happen to have an expected release date in mind, or maybe would consider a point release?

[nateabele]

@JGarrido I'm shooting for Wednesday.

[mimo84]

@nateabele I can confirm tested against head and it works just fine on IE11-10-9-8. Thanks, great job!

[timkindberg]

@mimo84 great news!

[swar30]

Possible work around. In our app it failed the same as above, when we used <div ui-view></div>
It looks like when we switch to <ui-view></ui-view> instead, that issue does not reproduce.

[gampleman]

With current master I get this issue as well, although the error message is a bit different:

Error: Invalid argument.
   at interpolateFnWatchAction (http://192.168.104.243:3000/assets/angular.js?body=1:6469:15)
   at $digest (http://192.168.104.243:3000/assets/angular.js?body=1:11809:23)
   at $apply (http://192.168.104.243:3000/assets/angular.js?body=1:12062:13)
   at done (http://192.168.104.243:3000/assets/angular.js?body=1:7844:34)
   at completeRequest (http://192.168.104.243:3000/assets/angular.js?body=1:8027:7)
   at onreadystatechange (http://192.168.104.243:3000/assets/angular.js?body=1:7983:11) 

This also only happens if the content inside the ui-view has interpolation inside it.

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb

[stanislav-ostapenko]

One more workaround for this issue. You can try to use ng-if="state.includes('**.new')" inside ui-view. Looks more like a hack but it works.