Question

我的代码是：

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';
                }
            }
        })
        .....

点击链接后，我调用以下代码：

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

我遇到的问题是，当重新加载ng-view时，控制器会创建3 ng-view元素，然后它会破坏其中的2个。所以最后我确实看到1 ng-view但是在中间，我在html中看到3 ng-view。在我的HTML体内，我只有1 ng-view。 2个额外的ng-view包含旧的html结构，其中1个包含新的html结构（由allproducts.html中编写的逻辑确定）。

P.S。 categoryID是我在all_products.html代码中使用的变量由于我的代码依赖于服务器，因此很难为它编写一个plunker。

更新：我在这里创建了一个类似的plunker：http://plnkr.co/edit/FiNwsMIugFznaSwCqUDc?p=preview

重现的步骤：

1）单击第一个显示详细信息超链接。单个ng-view

动画效果很好

2）点击第二个显示详细信息超链接。第一个ng视图仍然可见，而另一个已经开始出现。

如果我们看到Web浏览器Inspector，我们可以看到创建了两个ng-view元素。动画/ ng-animate与多个ng-view无关。我们可以删除动画，并且在Web浏览器Inspector中点击超链接时仍会看到多个ng-view（如果我们删除动画，它们会快速出现和消失）。在我的应用程序中，我将使用动画，因此这是我关注的问题。

Answer 1

动画中的ng-view行为是正常的，因为angular需要一个用于输入动画的元素，以及一个用于离开动画的元素。为了防止跳跃，你只需要同步时间，并使用绝对位置来防止进入的元素向下推动离开元素。

基本想法来自这个article。我已将其修改为淡入然后淡出，而不是一起 - 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

以下代码只允许您生成一个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();
  }
}
  }
});

Angularjs：使用routeparams并重新加载

2 个答案: