1

I have a top route that has a route param:

$stateProvider.state('dashboard', {
  abstract: true,
  url: '/:name',
  templateUrl: 'modules/dashboard/views/dashboard.html',
  controller: DashboardController,
  controllerAs: 'dashboard',
  resolve: {
    product: ['$stateParams', 'store', function($stateParams, store) {
      return store.findWhere({name: $stateParams.name});
    }]
  }
});

The :name param changes when a select dropdown item is selected. On change I trigger the following:

this.handleSelected = function(product) {
  $state.go($state.current.name, {name: product.name});
};

Then the children route fills in the views of the main route (just one for this example):

$stateProvider.state('dashboard.main', {
  url: '',
  views: {
    '': {
      templateUrl: 'modules/main/views/main.html',
      controller: MainController,
      controllerAs: 'main'
    }
  }
});

In dashboard.html the select dropdown directive takes a selectedProduct property where I pass the current :name, like:

<dropdown-products selected-product="{{$stateParams.name}}"></dropdown-products>
<div ui-view></div>

What happens is that whenever I select a product from the dropdown, the page flickers, it scrolls down real quick to the end of the loaded view, and then scrolls up again creating a visible flickering. I want to avoid this. This happens when setting autoscroll=true in the ui-view. When setting it to false it just scrolls down but not up. What I want to do is disable this behavior completely; I don't want it to scroll at all.

I found out that if I pass the :name param to the children routes and resolve the product in there, then it doesn't cause the flickering:

$stateProvider.state('dashboard', {
  abstract: true,
  url: '/',
  ...
});

$stateProvider.state('dashboard.main', {
  url: ':name',
  resolve: {
    product: ...
  }
});

But then the select menu doesn't show the selected option when going to the URL manually, because the param is in the children routes, not the parent route, plus resolving the product in every route seems counter-intuitive, I want it to come from the top route so it is only resolved once.

I also tried using the default $anchorScrollProvider and disable it like in this solution, but no luck so far. Any ideas?

Community
  • 1
  • 1
lokhura
  • 31
  • 1

1 Answers1

0

You can try to use ng-cloak on the view or you can make a loader directive, using angular-spinkit, that shows a template when $stateChangeStart and remove it when $viewContentLoaded.

If I have another idea, I'll let you know.

MarioAleo
  • 424
  • 4
  • 8
  • I tried the `ng-cloak` didn't work. I think this problem is more trouble that it seems. It is likely a browser issue, not particular to Angular from what I'm reading here http://stackoverflow.com/a/12045150/5508126 – lokhura Nov 16 '15 at 19:19
  • In the worst case you can give the directive loader a shot, anyway I'll try to think something else. – MarioAleo Nov 16 '15 at 19:21