angularjs - Angular UI Router preventDefault 导致不稳定的行为

Question

app.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        event.preventDefault();
        $state.go('error', null, { location: true, inherit: true, relative: $state.$current, notify: false });
    });
}]);

这似乎无法正常工作。显然它会在任何状态下触发(没关系，它只是为了测试)，它不允许转换到所需的状态(这很好)，但它并没有完全进入我希望它进入的新状态.我在 stateProvider 中正确绑定(bind)了“错误”

$stateProvider
        .state('error', {
            url: '/access-denied',
            templateUrl: 'application/view/error/error.html'
        });

我可以观察到的是 url 更改为/access-denied，但是关联的模板没有呈现。状态本身运行良好(当禁用 $stateChangeStart 处理程序时，如果我使用它的 url，它会正确呈现)。

在我看来，这是 UI 路由器中的错误，或者我可能遗漏了什么？这正是他们在文档常见问题解答中所采用的做事方式。

停下!

Answer 1

我自己刚遇到这个问题，在查看源代码后，实际的 View 转换/嵌入似乎是由内部的 $stateChangeSuccess 触发的，因此也被 notify 阻止了: false - 这有点违反直觉，我创建了一个问题 here .

作为解决方法，您可以使用 $state.go() 返回的 promise 的成功回调手动触发事件。我修改了您的示例以在下面显示:

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        event.preventDefault();

        $state.go('error', null, {notify: false}).then(function(state) {
            $rootScope.$broadcast('$stateChangeSuccess', state, null);
        });
    });

}]);