AngularJS .ng-enter animation doesn't work on first run

Question

I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time.

Here is my test code on plunker: http://embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview

Looks like ng-enter animation class, setting before, template uploads. Please, help.

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

It looks like the animation isn't working as your templates are getting loaded out of turn. I recommend either using directives for implementing tabs, or ngRoute.

I have made an example with ngRoute here: http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview

I'm not entirely sure what your app is supposed to do, so I may have broken your initial setup. But I see you're using a lot of rootScope. I recommend using a service for storing shared data between the controllers. Like this (using example from here: Passing data between controllers in Angular JS?)

app.service('productService', function() {
  var productList = [];

  addProduct = function(newObj) {
      productList.push(newObj);
  };
  getProducts = function(){
      return productList;
  };
});

Update: It is possible to use dynamic templateUrls in the $routeProvider, like this. This is also possible with the controller. That way you don't have to specify a seperate route for every one of your steps.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 23 '14 at 09:12

Kjell Ivar

1,154
8
8

Thx, for your answear. My module is a very big form, 11 steps, ~200 fields, and all for one object "laboratory", so i'm don't want use any services and routes. But you definitely right, when you can it's better use services and routes! :) – Anton Konyushevskiy Apr 23 '14 at 09:19
Ah, ok, that is understandable. I updated my answer. – Kjell Ivar Apr 23 '14 at 09:23
Thx, again! But in my case there will be more problems from routing :) I'm found solution with $templateCache. Now templates are loading to the app on startup, while user fill first step fields :) – Anton Konyushevskiy Apr 23 '14 at 12:23
Yeah, I saw, just thought I could put it there in case others came looking :) – Kjell Ivar Apr 23 '14 at 12:26

score 1 · Answer 2 · answered Apr 23 '14 at 09:15

1

Ok, i'm found solution for my own question, if you have same problem, you must use a $templateCache service, and here is code on plunker: http://embed.plnkr.co/mnB6VwXqHSt6L3IEUvCI/preview

answered Apr 23 '14 at 09:15

Anton Konyushevskiy

302
1
13

AngularJS .ng-enter animation doesn't work on first run

2 Answers2