Views are rendered twice on route transition

[DorianGrey]

My team has recently faced an issue with controllers being instantiated twice on route transition. While trying to find the reason for this, I've recognized that even the corresponding views got rendered twice, which was rather... unlikely.
This problem was detected in v0.2.7 - 20fcbf8 thus I considered moving to v0.2.8 - f9ce4dd should solve this. But it did not.

Information

Angular-version: 1.2.11
The relevant routes look like this (I cannot post everything, since it's part of a closed project):

$stateProvider
        .state('1ColumnLayout', {
            'abstract': true,
            url: "/1",
            templateUrl: "1ColumnLayout.html"
        })
        .state('login', {
          parent: "1ColumnLayout",
          url: "/login",
          views: {
            "screen-above": {template: ""},
            "screen": { templateUrl: "login.html", controller: "loginController"}
          }
        })
       .state('plantDetails', {
           parent: "2ColumnLayout",
           url: "/plantDetails?plantId",
           views: {
               "screen-above": { templateUrl: "userInfoAndNavigation.html"},
               "screen-left": { templateUrl: "details.left.html", controller: "detailsLeftController"},
                    "screen-right": { templateUrl: "details.right.html", controller: "detailsRightController"}
                },
                resolve: {
                    currentId: getId(false)
                }
            })

While using this template in 1ColumnLayout.html...

<div id="screen-above" class="clearfix" ui-view="screen-above"></div>
<div class="screen1Column clearfix" id="screen-below">
  <div class="s1cContent" ui-view="screen"></div>
</div>

...and this one in 2ColumnLayout.html

<div id="screen-above" class="clearfix" ui-view="screen-above"></div>

<div class="screen2Column clearfix" id="screen-below">
  <div id="screen-right" ui-view="screen-right"></div>
  <div id="screen-left" ui-view="screen-left"></div>
</div>

In a more-or-less long debugging session, I was able to drag down the issue to the following line in viewDirective.js (in v0.2.7):

initialView = transclude(scope);

The call stack mentioned that by calling transclude(...), the compile function is called again, building up the entire view, including controller instantiation. Afterwards, the function went ahead as expected, but destroyed the previously built view completely, building it up once more.
In v0.2.8, this line of code has changed to

anchor    = angular.element($document[0].createComment(' ui-view-anchor ')),

which seems more intuitive. However, moving to v0.2.8 did not fix the issue - seems to be broken on another part.

The curious thing...

... is primarily related to the sometimes in the topic: After performing all potential route transitions at least once, all views got rendered only once - as expected.

Workaround

Anyway, just for testing, I've changed

initialView = transclude(scope);

in v0.2.7 to

 initialView = angular.element($document[0].createComment(' ui-view-anchor '));

(picked from v0.2.8), and injected $document as well. Result: Everything worked as expected (I've added my diff so that the whole change is visible), which is... interesting.

diff --git a/public/lib/angular-ui-router/src/viewDirective.js b/public/lib/angular-ui-router/src/viewDirective.js
index efc8930..5e0a9ed 100644
--- a/public/lib/angular-ui-router/src/viewDirective.js
+++ b/public/lib/angular-ui-router/src/viewDirective.js
@@ -1,6 +1,6 @@

-$ViewDirective.$inject = ['$state', '$compile', '$controller', '$injector', '$anchorScroll'];
-function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $anchorScroll) {
+$ViewDirective.$inject = ['$state', '$compile', '$controller', '$injector', '$anchorScroll', '$document'];
+function $ViewDirective($state, $compile, $controller, $injector, $anchorScroll, $document) {
   var $animator = $injector.has('$animator') ? $injector.get('$animator') : false;
   var viewIsUpdating = false;

@@ -15,7 +15,8 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
             name = attr[directive.name] || attr.name || '',
             onloadExp = attr.onload || '',
             animate = $animator && $animator(scope, attr),
-            initialView = transclude(scope);
+            initialView = angular.element($document[0].createComment(' ui-view-anchor '));
+

         // Returns a set of DOM manipulation functions based on whether animation
         // should be performed

Even worse, I was not able to reproduce this issue using v0.2.8 with a more simple example, and I'm not sure why it still occurs - wasn't that easy to drag down to a particular line as in v0.2.7 ;)

Maybe some of you have a clue what may cause this, or may check this in a more complex project - rendering views twice, including controller instantiation, is rather unlikely when it comes to performance, or possible side-effects that come along with init-functions.
For the moment, this appears to be a blocking issue in our case which prevents us from moving to v0.2.8 and, as a result, from other fixes / improvements.

[timh5]

any update on this? do you know if it was fixed in 0.2.10. im seeing the same problem now

[timh5]

i tried this patch and it broke for me. what is "ui-view-anchor" referring to? do i need to add that tag somewhere in my template?

[DorianGrey]

I'll have a look at 0.2.10 when I'm back in office next week.
As you see, 'ui-view-anchor' is a comment added to the document itself, no special declaration in any template. In our case, it modifies one of the templates mentioned above (yes, that's their whole content!).
The patch I've described only works for 0.2.7, not for any other version. "Broke for me" is not a useful error message, though ;)

[timh5]

thanks for reply. not a big deal now. i've given up on ui-router now... its just not ready for what we want to do (preserve dom cache/state between state changes). Im back to RouteProvider and ng:show which seems to work great now...

[MathiasTim]

Mhh interesting, seems we're running into the same issue you described. We're on version 0.2.8. Tried to update to 0.2.10 today and got an error, but don't know right now if it is related with this.

Would be great to hear if there is a fix in version 0.2.10. The code in this version in viewDirective.js looks a lot different to 0.2.7

[nateabele]

Should be fixed, as uiView now uses the same DOM-handling code as ngView.

[DorianGrey]

Alright, I've checked 0.2.10 - and the problem still persists. As I've mentioned in the report, the handling of uiView was already changed in 0.2.8 (the version I picked the code from), but it seems to just have moved the problem to another place.

[nateabele]

As I've mentioned in the report, the handling of uiView was already changed in 0.2.8

0.2.10 changed it again, and more extensively.

Could you possibly create a minimal reproduction of the problem in a Plunkr?

[DorianGrey]

First of all, I've already mentioned that the hackfix I've illustrated for 0.2.7 did not work for later versions - seems the cause of this problem has changed since then.

However, I've stripped down some of our logic and created a medium-complex example here (had to provide angular and ui-router manually, since Chrome complained about MIME types), but unfortunately, it does not illustrate the error. I'm not sure why, since it includes all logical steps we are using. Do you see anything that might cause a problem slightly misused in a wrong way?

Maybe one of the others that have faced this are more lucky with a smaller example?

Just to illustrate that this is not a joke:

That was a test with 0.2.10 this morning, which created the feedController three (!) times, always with different ids (see the right hand side), before anything happens on the site (see the upper part). I'm sorry that I can't provide more details, but most of the projects contents are rather... secret up to now.

[snekbaev]

Hi,

seems like I'm also getting this (0.2.10). I didn't check other ui-views, but currently 4-th (nested in other ui-views: 4th inside 3rd, 3rd inside 2nd etc) ui-view is doing that. I'm loading a cached template markup into ui-view="workspaceEditorContent", each template has a controller set, so inside one of those controllers I've added an 'alert'. When that view is loaded I see previously loaded content AND the new one which is being loaded. Following image should help:

For now fixed the UI glitch with:

[ui-view="workspaceEditorContent"] : nth-child(2) 
{
    display:none;
}

[artem1]

Have exactly issue as @snekbaev, 2 view and only 1 controller instantiation. v0.2.10
There https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js#L204 view updated two time? and for second call go to transclude https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js#L211, in wich called cleanupLastView(), that remove duplicate dom node. Can't find hot to fix this. In Opera (portable last version) this flickr visible in ui (in chrome, ff or opera standalone not, strange).

update: comment in viewDirective.js lines 143:157 (exclude $animate and $animator) - and it seems it solved the problem

[cyberdude]

Is this a ui-router error or a ng-animate?

[pihomeserver]

Seems to be ui-router. Today i removed yeoman, grunt and all stuuf installed by yeoman. I made a fresh install of phonegap and angular and now all works well ... Really strange

Le 2 juil. 2014 à 21:57, Arnaldo Capo notifications@github.com a écrit :

Is this a ui-router error or a ng-animate?

—
Reply to this email directly or view it on GitHub.