Angular.js：使用routeparams和重新加载

Question

My code is:

supportByProductApp.config(['$routeProvider',
    function($routeProvider) {
        //Setting up HTML pages and controllers depending upon the suffix in the URL
        $routeProvider.
        when('/all_products/:alphabet?', {
            templateUrl: '/etc/designs/help/clientlibs/support/support-hub/allproducts.html',
            controller: 'CategoryListCtrl',
            resolve: {
                categoryID: function() {
                    return 'all_products';
                }
            }
        })
        .....

On clicking a link, I invoke following code:

$scope.alphabetClicked = function(albhabet) {
    $location.path('/all_products/' + albhabet);
    $route.reload();
}

The problem I have is that when doing the reload of ng-view, the controller would created 3 ng-view elements and then it will destroy 2 of them. So finally I do see 1 ng-view but intermediately, I see 3 ng-view in the html. In my html body, I have only 1 ng-view. The 2 extra ng-view contain old html structure and 1 of them contains new html structure (as determined by the logic written in allproducts.html).

PS categoryID is a variable which I use inside my all_products.html code Since my code is server dependent, its really hard to write a plunker for it.

Update: I have created a similar plunker here : http://plnkr.co/edit/FiNwsMIugFznaSwCqUDc?p=preview

Steps to reproduce:

1) Click on the first show details hyperlink. The animation comes fine with single ng-view

2) Click on second show details hyperlink. The first ng-view is still visible while the other one has already started to appear.

If we see the Web browser Inspector, we can see two ng-view elements are created. Animation/ng-animate has nothing to do with multiple ng-view. We can remove animation and still see multiple ng-view are there on click of hyperlink in Web browser Inspector (they appear and disappear quickly if we remove animation). In my app, im going to use animations and hence this is of concern to me.

Answer 1

The ng-view behavior in the animation is normal, as angular needs an element for enter animation, and an element for leave animation. To prevent the jump you just have to synchronize the timing, and use position absolute to prevent the entering element from pushing the leaving element down.

The basic idea comes from this article . I've modified it to have a fade in and then fade out, and not together - fiddle .

css:

h2 { /** prevent h2 default margin from causing the leaving ngView to jump down when setting position: absolute **/
  margin-top: 0;
}

js:

sampleApp.animation('.content',
  function() {
    return {
      enter: function(element, done) {
        var delay = $('.content').length === 2 ? 600 : 0; // if there are 2 .content (ngView) delay entrance, so the 1st can leave
        $(element).css({
          opacity: 0 // set the stage
        });
        $(element).delay(delay).animate({ // animate the opacity with delay if needed
          opacity: 1
        }, 600, done);
      },
      leave: function(element, done) {

        $(element).css({
          position: 'absolute', // use position absolute so the element won't jump down
          opacity: 1 // set the stage
        });
        $(element).animate({
          opacity: 0
        }, 600, done);

      }
    }
  }
)

Answer 2

Below is the code which lets you generate only one ng-view.

sampleApp.animation('.content', function() {
  return {
    enter: function(element, done) {
  element.css('display', 'none');
  jQuery(element).hide().fadeIn(2200, done);
  return function() {
    //element.stop();
  }
},
leave: function(element, done) {
  jQuery(element).fadeOut(0, done);//note this will not show animation on leave
  return function() {
    //element.stop();
  }
}
  }
});