Question

我正在尝试在更改路线时左/右设置角度页面。

如果用户进入“更深”级别，页面应该动画离开。如果用户进入“较浅”级别，该页面应该是正确的。

这会给人一种app-feel（就像Android / iOS）。

我尝试使用以下方法对关卡进行编程：

angular
    .module('app', ['ngRoute','ngAnimate'] )
    .config(function($routeProvider) {
        $routeProvider

            // route for the home / cases page
            .when('/', {
                templateUrl : 'views/cases.html',
                controller  : 'CasesCtrl',
                controllerAs : 'vm',
                resolve: {
                    page: function() {
                        return {
                            level: 1
                        }
                    }
                }
            })

            // route for the measurements page
            .when('/measurements/:route_id', {
                templateUrl : 'views/measurements.html',
                controller  : 'MeasurementsCtrl',
                controllerAs : 'vm',
                resolve: {
                    page: function() {
                        return {
                            level: 2
                        }
                    }
                }
            })

我尝试使用关卡在主控制器中左/右设置动画，如下所示（不工作）：

function MainCtrl($rootScope, $route) {
    var vm = this;

    $rootScope.$on('$routeChangeStart', function(event, next, current) {

        // this will show next with a "locals" property
        console.log('next', next);
        // this will show next without a "locals" property, showing that
        // "locals" is not yet available on routeChangeStart
        console.log('next extended', angular.extend({}, next));

        // set animation direction
        if (current == null) {
            // seems like this is the first page we open, so no animations needed
            vm.animateDirection = 'animate-not';
        } else if (!('page' in current.locals)) {
            // current.locals contains values set in the resolve part of $routeProvider
            vm.animateDirection = 'animate-not';
        } else if (!('page' in next.locals)) {
            // current.locals contains values set in the resolve part of $routeProvider
            vm.animateDirection = 'animate-not';
        } else if ('level' in vm) {
            if (current.locals.page.level > next.locals.page.level) {
                vm.animateDirection = 'animate-left-to-right'; // we go back a level, so animate from left to right
            } else {
                vm.animateDirection = 'animate-right-to-left'; // we go deeper, so animate from right to left
            }
        } else {
            vm.animateDirection = 'animate-not'; // first page, no animation
        }

    });

}

这给了我''运算符'在'undefined'中搜索'page'的错误“不能使用”，因为在“$ routeChangeStart”事件期间尚未定义“locals”属性。

有没有办法获得$ routeChangeStart事件中不同路由的“级别”？

亲切的问候，亨德里克·扬

Answer 1

我认为您无法在resolve上访问$routeChangeStart的属性，因为此时路由更改仍然可以取消，因此尚未运行解析代码。

话虽如此 - 你实际上并不需要在这里使用resolve，因为你的值是硬编码的。如果使用以下方法定义路径：

.when('/', {
  templateUrl : 'views/cases.html',
  controller  : 'CasesCtrl',
  controllerAs : 'vm',
  data: {
    level: 1
  }
})

然后，您可以非常简单地从路线更改代码中访问：

$rootScope.$on('$routeChangeStart', function(event, next, current) {
  if(current.data.level < next.data.level) { /* do stuff */ }
}

Angularjs，如何在路线上改变左/右运动的动画

1 个答案: