Getting multiple views on the dom. #6711

emgould · 2014-03-17T13:44:09Z

Post upgrading to 1.2.14 I am getting multiple views on the dom when I did not previously and it is unexpected. Worked fine previously. My .config looks like the following:

myApp.gwWebApp
    .config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
          .when('/login', {
            controller: 'LoginController',
            templateUrl: '/app/views/login.html'
          })
          .when('/profiles', {
            controller: 'ProfileController',
            templateUrl: '/app/views/profile.html'
          })
          .when('/group/view/:id', {
            controller: 'GroupController',
            templateUrl: '/app/views/group.html'
          })
          .when('/calendar', {
            controller: 'CalendarController',
            templateUrl: '/app/views/calendar.html'
          })
          .when('/invite/:id', {
            controller: 'InviteController',
            templateUrl: '/app/views/invite.html'
          })
          .when('/notifications', {
            controller: 'NotificationsController',
            templateUrl: '/app/views/notifications.html'
          })
          .otherwise({
            redirectTo: '/main'
          });
    /* $locationProvider.html5Mode(true); */
}]);

One of many route command might be like this href tag:

<td ng-show='nav.unRespondedCount > 0'><a href="#calendar" class="fa fa-calendar pink" data-bubble={{nav.unRespondedCount}} >

If I inspect the dom i see the both the current and past view with the angular animate classes now added:

<div ng-view class="center-area center-canvas ng-scope ng-animate ng-leave ng-leave-active" style=""><!--div collapse="!showAlert">

<div ng-view class="center-area center-canvas ng-scope ng-animate ng-enter ng-enter-active" style=""><!--div collapse="!showAlert">

Very strange...

After some experimentation, I am seeing different behaviors depending upon how the location.path is updated or how the href is specified. I have experimented with href set to: "#/[route]' or location.path('/[route]').

The text was updated successfully, but these errors were encountered:

caitp · 2014-03-17T14:02:23Z

Hi, can you please post a reproduction?

IgorMinar · 2014-03-17T23:16:43Z

this might be related to some animation changes we made, but we do need a better example in order to reproduce the problem.

@matsko do you by chance know what's going on?

matsko · 2014-03-18T05:24:52Z

@emgould what does your CSS code look like? Is there any change in your CSS code between 1.2.13 and 1.2.14? This commit may be causing an issue: e988199

emgould · 2014-03-18T13:34:43Z

I went straight from 1.2.8 to 1.2.14. I am troubled at how to show more info. My app is roughly 5K lines of code. All I can tell you is that I downgraded back to 1.2.8 and no issues. However as you can imaging it makes it unusable.

When you ask for a repro are you talking about jsfiddle/plunker?? I am sure if I grossly simplify my app that it won't happen. All I can tell you is that I have been coding with Angular for about 1year. So I am not new to constructs. My CSS is rather involved. Compiled down from less. I will look at the CSS issue that you reference. To see if it is relevant.

caitp · 2014-03-18T13:42:46Z

I don't think the css should be involved in getting duplicate DOM nodes.. ngView uses element transclusion, it's possible/likely that $animate.enter() is getting called twice, or the underlying DOM manipulation is happening twice, without removing the old. It's hard to be sure though, so trying to reproduce would help.

I guess it's possible specific css properties are involved, but start with a simple repro first before worrying about that, it should take like 5 minutes

IgorMinar · 2014-03-18T20:20:08Z

the css could be causing animations to misfire, which could cause duplicate
views. we need more info.

On Tue Mar 18 2014 at 6:42:56 AM, Caitlin Potter [email protected]
wrote:

I don't think the css should be involved in getting duplicate DOM nodes..
ngView uses element transclusion, it's possible/likely that
$animate.enter() is getting called twice, or the underlying DOM
manipulation is happening twice, without removing the old. It's hard to be
sure though, so trying to reproduce would help.

I guess it's possible specific css properties are involved, but start with
a simple repro first before worrying about that, it should take like 5
minutes

Reply to this email directly or view it on GitHubhttps://github.com//issues/6711#issuecomment-37933287
.

matsko · 2014-03-18T20:43:17Z

@caitp and @IgorMinar it isn't the CSS that is getting involved directly. It's just that $animate has no idea that it has ended. What is likely going on is that the CSS transition code is never getting triggered (maybe a missing active class or no styles are changing). This should, however, always close with the fallback timer. Or a JS animation never calls the done function.

We need more info.

emgould · 2014-03-18T21:05:49Z

Tell me how to provide more info. I can't turn over my entire code
base. So help me help you.

Best,
Eric

Eric Gould
[email protected]
(201)632-1099

On 3/18/2014 4:44 PM, Matias Niemelä wrote:

@caitp https://github.com/caitp and @IgorMinar
https://github.com/IgorMinar it isn't the CSS that is getting
involved directly. It's just |$animate| has no idea that it has ended.
What is likely going on is that the CSS transition code is never
getting triggered (maybe a missing active class or no styles are
changing). This should, however, always close with the fallback timer.

We need more info.

—
Reply to this email directly or view it on GitHub
#6711 (comment).

matsko · 2014-03-18T21:14:09Z

@emgould it would be best if we pair up on this together. Are you free sometime tomrrow? What timezone are you in and what is your availability? Please email me at the email that is on my github profile.

emgould · 2014-03-18T21:31:01Z

I am on the east coast. I could talk in my afternoon around between
noon and 2pm.

Best,
Eric

Eric Gould
[email protected]
(201)632-1099

On 3/18/2014 5:15 PM, Matias Niemelä wrote:

@emgould https://github.com/emgould it would be best if we pair up
on this together. Are you free sometime tomrrow? What timezone are you
in and what is your availability? Please email me at the email that is
on my github profile.

—
Reply to this email directly or view it on GitHub
#6711 (comment).

matsko · 2014-03-19T13:14:50Z

Thanks Eric for contacting me.

Another related issue popped up about animations and I think I will have a go at this today since the example is easy to understand: #6748.

Let me tackle that first and then, if it doesn't solve your issue, let's pair up. Sorry for the change in scheduling. We can save more time by doing it this way.

matsko · 2014-03-21T21:50:32Z

@emgould please test this out using these files:
http://ci.angularjs.org/job/angular.js-matias/685/artifact/build/angular.js
http://ci.angularjs.org/job/angular.js-matias/685/artifact/build/angular-animate.js
http://ci.angularjs.org/job/angular.js-matias/685/artifact/build/angular-route.js

Fix fix in the files above fixes #6748

matsko · 2014-03-25T15:43:30Z

@emgould any news?

emgould · 2014-03-26T22:29:38Z

Matias,
Unfortunately I am traveling this week so I won't be able to test until
next week.

Best,
Eric

[email protected]
(201)632-1099
On Mar 25, 2014 11:44 AM, "Matias Niemelä" [email protected] wrote:

@emgould https://github.com/emgould any news?

Reply to this email directly or view it on GitHubhttps://github.com//issues/6711#issuecomment-38580345
.

matsko · 2014-04-03T04:14:36Z

@emgould any change you have some time to check this out?

emgould · 2014-04-03T20:35:55Z

I can focus on this tomorrow. What would you like me to do?

Best,
Eric

Eric Gould
[email protected]
(201)632-1099

On 4/3/2014 12:15 AM, Matias Niemelä wrote:

@emgould https://github.com/emgould any change you have some time to
check this out?

—
Reply to this email directly or view it on GitHub
#6711 (comment).

matsko · 2014-04-03T20:48:58Z

Please test out your former code using the angular.js files from http://code.angularjs.org/snapshot/

emgould · 2014-04-04T14:28:55Z

Ok. Will let you know.

Best,
Eric

Eric Gould
[email protected]
(201)632-1099

On 4/3/2014 4:50 PM, Matias Niemelä wrote:

Please test out your former code using the angular.js files from
http://code.angularjs.org/snapshot/

—
Reply to this email directly or view it on GitHub
#6711 (comment).

dmaj7no5th · 2014-06-09T18:16:10Z

What was the status of the testing? I am running into this same behavior (in IE9 only). When route changes happen, and ngView attempts to clean out the prior view, IE9 throws an 'Access Denied' error. When I inspect the DOM, I see duplicate ng-view divs.

matsko · 2014-07-01T23:06:11Z

@emgould any progress? Can you please try testing using the snapshot version (which is 1.3) there have been a bunch of fixes done to ngAnimate.

matsko · 2014-07-14T20:12:40Z

@emgould I'm closing the issue for now. Please reply back here incase you're still experiencing the issue with the latest version of Angular. And please provide a plunkr link to the bug. Thanks.

DiegoMajluf · 2015-06-27T05:28:40Z

matsko I think I can reproduce this issue and put it in this link http://plnkr.co/edit/wm3bcTvdxCdGcWJDXstS?p=preview

please let me know your comments

DiegoMajluf · 2015-06-27T13:33:02Z

the problem is that jquery puts the dialog DOM outside ngView div, so every time I navigate to the page with the dialog div it is added to the document again.

the solution is to relocate de dialog div inside the ngView div

tbosch assigned tbosch and unassigned tbosch Mar 17, 2014

IgorMinar self-assigned this Mar 17, 2014

IgorMinar added severity: regression labels Mar 17, 2014

IgorMinar added the needs: more info label Mar 17, 2014

IgorMinar added this to the Purgatory milestone Mar 17, 2014

IgorMinar removed their assignment Mar 17, 2014

IgorMinar added component: ngAnimate labels Mar 17, 2014

matsko self-assigned this Mar 18, 2014

matsko closed this as completed Jul 14, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting multiple views on the dom. #6711

Getting multiple views on the dom. #6711

emgould commented Mar 17, 2014

caitp commented Mar 17, 2014

IgorMinar commented Mar 17, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

caitp commented Mar 18, 2014

IgorMinar commented Mar 18, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

matsko commented Mar 19, 2014

matsko commented Mar 21, 2014

matsko commented Mar 25, 2014

emgould commented Mar 26, 2014

matsko commented Apr 3, 2014

emgould commented Apr 3, 2014

matsko commented Apr 3, 2014

emgould commented Apr 4, 2014

dmaj7no5th commented Jun 9, 2014

matsko commented Jul 1, 2014

matsko commented Jul 14, 2014

DiegoMajluf commented Jun 27, 2015

DiegoMajluf commented Jun 27, 2015

Getting multiple views on the dom. #6711

Getting multiple views on the dom. #6711

Comments

emgould commented Mar 17, 2014

caitp commented Mar 17, 2014

IgorMinar commented Mar 17, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

caitp commented Mar 18, 2014

IgorMinar commented Mar 18, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

matsko commented Mar 18, 2014

emgould commented Mar 18, 2014

matsko commented Mar 19, 2014

matsko commented Mar 21, 2014

matsko commented Mar 25, 2014

emgould commented Mar 26, 2014

matsko commented Apr 3, 2014

emgould commented Apr 3, 2014

matsko commented Apr 3, 2014

emgould commented Apr 4, 2014

dmaj7no5th commented Jun 9, 2014

matsko commented Jul 1, 2014

matsko commented Jul 14, 2014

DiegoMajluf commented Jun 27, 2015

DiegoMajluf commented Jun 27, 2015