Question

我正在使用angular-ui-router并且控制器具有多个$state.go()事件，各种按钮将导航到其他视图。

有没有办法在执行任何$state.go()（在此控制器中）事件之前运行函数来检查条件，而无需在每个$state.go()函数之前手动添加检查？

基本上我想检查你是否处于编辑模式，提示用户，然后相应地执行。

我想知道是否有一个angular-ui-router方法可以帮助我解决这个问题。我知道这可以在不使用angular-ui-router的情况下完成。

Answer 1

嗨测试员：如果你将$ state注入你的控制器，听起来你已经这样做了......你可以使用$state.current.name。这将为您提供您所在州的当前名称：

.state('dashboard.welcome', { url: '/welcome', data: { title: 'Welcome to my company', }, permissions: { has: ['authenticated', 'completed'], }, }); 如果你在控制器内执行此操作：您将获得console.log($state.current.name) =＆gt; 'dashboard.welcome'。这对你的编辑场景有好处...... if($state.current.name) == 'dashboard.edit'){ $state.go(destination); } else if...

你可能从我的例子中注意到的另一件事是权限：听起来你可能会受益于此library npm被称为angular-permission（有一天它将不可避免地成为一个断开的链接）。这很酷。

要使用它，您基本上可以说：用户是否有此标准？如果是，他们可以访问此页面。否则......重定向到：'blahblah'。

但是在我的页面中，我根据某些条件进行了大量导航，我在$ parent.controller中进行了导航，因此您知道具有ui-router的子状态将可以访问其父级控制器及其功能所以我有一个像以下的功能：

$scope.switchToState = function(){
        if($state.current.name === ''){
            var destination = 'formy.firstPage';
            var routeParams = {};
            if(account.check('mycriteria')){
                destination = 'form.secondPageInstead';
            }
            else if(angular.isString(LocalStorage.secondCriteria)){
                destination = 'form.otherPage';
                routeParams = {id: LocalStorage.secondCriteria};
            }
           ...
            $timeout( //often needed is the $timeout to wait for DOM to 
                function(){
                    if(routeParams.slug){
                        $state.go(destination, routeParams);
                    }
                    else{
                        $state.go(destination);
                    }
                }
            );
        }
    };

现在在每个子控制器中，而不是在每个函数结束时说$ state.go（'somewhere'）我执行$ scope.switchToState（）并为我路由一切。

Answer 2

我最终做的是@elclanrs和@Zargold建议的组合。

我设置了一个全局$scope变量来检查我是否处于编辑模式。然后在$scope.$on($stateChangeStart ...上检查了当前$state的名称并进行了相应的处理。

注意我$scope使用$rootScope $stateChangeStart $scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){ if($state.current.name === 'dashboard.welcome' && $scope.isInEditMode) { event.preventDefault(); $modal.open({ animation: false, templateUrl: 'modal.html', controller: 'ModalCtrl', size: 'sm', resolve: { onSuccess: function() { return function(){ //continues the state change $scope.isInEditMode = false; $state.go(toState.name, toParams); }; } } }); } }); animation-timing-function: linear，因此它只会检查此控制器范围内的状态更改。

.star

在一个控制器ui-router中的所有$ state.go（）事件之前运行检查

2 个答案: