javascript - 在一个 Controller ui-router 中的所有 $state.go() 事件之前运行检查

Question

我正在使用 angular-ui-router 并有一个带有多个 $state.go() 的 Controller 事件时，各种按钮会将您导航到其他 View 。

有没有办法运行一个函数来检查任何 $state.go() 之前的条件(在此 Controller 中)执行事件时无需在每个 $state.go() 之前手动添加检查功能？

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

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

Answer 1

测试员您好:如果您将 $state 注入(inject) Controller ，听起来您已经完成了...您可以使用 $state.current.name 。这将为您提供您所在州的当前名称，例如:


.state('dashboard.welcome', {
url: '/welcome',
data: {
title: 'Welcome to my company',
},
permissions: {
has: ['authenticated', 'completed'],
},
});
如果您在 Controller 内执行此操作:您将得到 console.log($state.current.name) =>“仪表板.欢迎”。这对您的编辑场景有好处...... if($state.current.name) == 'dashboard.edit'){
$state.go(destination);
}
else if...

您可能从我的示例中注意到的另一件事是权限:听起来您可能会从此 library 中受益。 npm 称为 Angular-permission(有一天它不可避免地会成为一个损坏的链接)。这很酷。

要使用它，你基本上可以说:用户有这个标准吗？如果是，他们可以访问此页面。否则...redirectTo: 'blahblah'。

但是在我的页面中，我根据某些标准进行大量导航，我将其放在 $parent.controller 中，这样您就知道带有 ui-router 的子状态将可以访问其父级的 Controller 及其功能所以我有一个类似的功能:

$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);
                    }
                }
            );
        }
    };

现在在每个子 Controller 中，而不是在每个函数的末尾说 $state.go('somewhere') 我执行 $scope.switchToState() ，它会为我路由所有内容。