0

我已经看到了各种解决方法，用于在 Angular 1.2 中点击/单击按钮时向前和向后设置 ng-view 动画。这涉及在您的范围内设置一个方法，该方法将范围变量设置为 ng-class 中使用的页面/动画，以在具有 ng-view 指令的元素上设置一个类。在更大的应用程序上，这似乎不是很可扩展。我相信其中一部分是您将创建一个服务/工厂以注入控制器以不重复代码。但我真的想知道您是否可以在路由器解析功能中做一些事情，您可以在那里为动画设置一些值并将它们发送到返回立即解决的承诺的服务。这可以在路由更改之前在 ng-view 元素上设置类，并可能以这种方式管理它。

有没有人有更明确的方式来处理动画 ng-view 的正向和反向取决于用户要去的路线？

4

2 回答 2

0

我发现起作用的是使用 css 子类，因此在您的容器中，您可以绑定到一个名为“mode”的属性或类似的东西。

然后，无论您是使用 $routeChangeSuccess 还是其他东西，只要您想切换动画，就可以让它们发生变化，这取决于您。

于 2014-02-06T16:07:21.740 回答
0

这是我一直在玩的一个概念，并且能够在视图中为一些转发器元素工作。我还没有到动画的地步ng-view……但应该给你一个很好的起点。

概念是ng-animate在每个路由配置中存储一个对象。您可以将范围对象传递给ng-animate不需要表达式。

function Ctrl($scope){
   $scope.ANIM={enter: 'animate-enter', leave: 'animate-leave'};
}

<li ng-animate="ANIM">

在配置中：

 $routeProvider.when('/foo', {
                controller: 'Ctrl',
                templateUrl:'view1.html',
                anim:{enter: 'skew-enter', leave: 'skew-leave'}
            })

然后从当前路由配置中run()监听并获取动画$routeChangeStart

app.run(function($rootScope){
            $rootScope.anim={enter: 'animate-enter', leave: 'animate-leave'}
            $rootScope.$on('$routeChangeStart', function(event, current){               
                $rootScope.anim=  current.anim 
            })
        })

在我的沙盒版本中，我这样做：

 function Ctrl($scope, $rootScope){
       $scope.ANIM=$rootScope.anim;
    }

再次......这仍处于概念验证阶段。当我有 2 个具有相同 ng-animate 的视图并在每个控制器内使其$scope.anim=$rootScope.anim工作时。

希望这会有所帮助...好奇你是否对它做更多的事情

于 2013-10-30T23:41:22.457 回答