4

我正在使用 ng-view 使用动画（角度 1.2RC1）在视图之间转换。为了确定动画应该采用的方向，我在调用我的位置更改之前在 ng-view div 上插入一个向左滑动或向右滑动的类。离开动画（首先运行）有效，但随后从 ng-view div 中删除了我的类。

我使用一个服务来确定是向左滑动还是向右滑动如下：

$scope.slideView = function(index, url){ 

  if ( viewSlideIndex.getViewIndex() > index) {
    $('#slideview')
      .toggleClass("slide-left", false)
      .toggleClass("slide-right", true);
  } 
  else {
    $('#slideview')
      .toggleClass("slide-left", true)
      .toggleClass("slide-right", false);
  };
  $location.url(url);
}

它更新了 ng-view div 中的类：

<button ng-click='slideView(1, "/pg1")'>Pg1</button>
<button ng-click='slideView(2, "/pg2")'>Pg2</button>
<button ng-click='slideView(3, "/pg3")'>Pg3</button>
<div id="slideView" ng-view class="slide-right"></div>

看起来好像 slideView (ng-view) 类已经被缓存并在完成后刷新，所以我想知道如何更新缓存或更改我的方法？

非常感谢您的帮助。

http://jsfiddle.net/RoryOSiochain/BfJWf/

在小提琴中手动将向左滑动或向右滑动的类插入到 slideView 中可以正常工作。

更新：希望我上面对 Jquery 的使用不会混淆这个问题，使用 ng-class 和 jQuery 都返回相同的结果/体验。

4

2 回答 2

2

对于遇到此问题的其他人：

原来1.2RC1在使用ng-class的时候进入动画有问题。这现在已在 1.2RC2 中得到修复并按预期工作。

工作演示

http://jsfiddle.net/RoryOSiochain/vWT2z/

更新：使用 xpepermint 的建议，我用工作版本更新了小提琴：

（没有完全应用页面索引）

如果使用它，请在此处设置帧索引值（下面硬编码为 3） -

    //
    // Set the value of the index to compare against here:
    //
    if (3 > index) {
        $scope.slideDir = 'slide-right';
    } else {
        $scope.slideDir = 'slide-left';
    };

于 2013-09-05T15:22:05.843 回答
1

我会改变这样的if陈述：

function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.slideView = function (index, url) {
        //
        // Set the value of the current view index to compare against here:
        //
        if (viewSlideIndex.getViewIndex() > index)
            $scope.slideDir = 'slide-left';
        else
            $scope.slideDir = 'slide-right';
        viewSlideIndex.setViewIndex(index);
        $location.url(url);
    }

};
于 2014-07-26T12:22:03.377 回答