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

这似乎无法正常工作。显然它会触发任何一个状态（它很好，它只是用于测试），它不允许转换到所需的状态（这很好），但它没有＆＃39;完全进入我希望它去的新状态。我有错误＆＃39;在stateProvider中正确绑定

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

我可以观察到，网址更改为/ access-denied，但相关模板不会呈现。状态在它自己的工作正常（当禁用$ stateChangeStart处理程序时，如果我使用它的网址，它会正确呈现）。

在我看来它是UI路由器中的一个错误，或者我错过了什么？这是他们在文档常见问题中所做的事情的确切方式。

HALP！

Answer 1

我自己刚刚遇到过这个问题，在查看来源之后看来实际的视图转换/转换是由$stateChangeSuccess内部触发的，所以notify: false也阻止了这个问题 - 这有点反直觉，我创建了一个问题here。

作为一种解决方法，您可以使用$state.go()返回的承诺的成功回调手动触发事件。我修改了你的例子以显示如下：

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

}]);

Answer 2

$stateChange...Whatever个事件是由UI路由器触发的自定义事件。自定义事件的preventDefault()仅与DOM事件相似。如果有人使用defaultPrevented事件属性，则无法执行操作。 https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js#L1131

如果你想要一个无效的链接，你必须使用ng-click指令并在其中使用preventDefault（）（它将起作用，因为它将是一个标准的DOM事件）。

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

2 个答案: