0

I'm using stateProvider for routing.

Problem:

When I click any link, my controller calls the factory service recursively. What happens is that after every successful ajax call my view blinks or flickers. (Which I don't wan't)

Please provide some tips. So far I have tried ng-cloak and class="ng-cloak", with no luck.

Question: How can I avoid these flicker effect until all ajax calls are completed.

  .state('vehicle', {
      abstract:true,
      url: "/vehicle",
      template: '<div ui-view style="height:100%"></div>',          
      controller:'vehicleManagementCtrl'
  })
  .state('vehicle.list', {
        url: "",          
        templateUrl: 'views/br_manager/mg_vehicleManagement.html'
    })
  .state('vehicle.add', {
        url: "",
        templateUrl: 'views/br_manager/mg_addVehicle.html'
    })
  .state('vehicle.edit', {
      url: "",
      templateUrl: 'views/br_manager/mg_editVehicle.html'
  })
   .state('vehicle.delete', {
        url: "",
        templateUrl: 'views/br_manager/mg_addVehicle.html'
    })
Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
Gavishiddappa Gadagi
  • 1,120
  • 1
  • 16
  • 34
  • Check 2nd answer - `resolve` when using `state` - http://stackoverflow.com/questions/28514241/angularjs-how-to-prevent-code-flash-in-page-while-loading – Rob Scott Jun 21 '16 at 12:31

2 Answers2

0

Try using resolve in your states, that way you can specify that an ajax call needs to be completed first in order to display the view. Try looking for more info on resolve in docs.

drys
  • 735
  • 1
  • 6
  • 14
0

This answer would probably fit better as a comment, but I can't do that yet.

Have you added the ng-cloak css classes in order to work? Please check: https://docs.angularjs.org/api/ng/directive/ngCloak

Do you make several requests on each click? I didn't get very well the recursivity.

Could you give an example or a fiddle so we can see the code?

llessa
  • 11
  • 3
  • when i click the link my controller calls fetchYearList() after getting response i.e, 200 or 201 successive call is made for zeroth $index value factory.fetchVehicleList = function(year){ return $resource (url+year,{},{ fetch: method: 'GET', header : 'application/json', intercepton : response(){ function(data) { return data }}})} – Gavishiddappa Gadagi Jun 21 '16 at 12:54