Angular View 自动重定向到默认（否则）视图

Question

我的视图会自动重定向到默认（否则）视图，我不知道为什么。当我单击时，它会从 View1 转到 View2，然后自动重定向到默认的 View3。我通过把 console.log() 在 View2

中

View1 -> View2 -> View3

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('view1', {
            url: "/view1",
            templateUrl: "App/Views/start/view1.html",
            controller: 'MyController'
        })
        .state('view2', {
            url: "/view2/:details",
            templateUrl: "App/Views/start/view2.html",
            controller: 'MyController'
        });
     $urlRouterProvider.otherwise('/view3');
    });

我像这样打电话给$state.go。

$state.go('view2', { details: JSON.stringify(response.details) });

我试图通过阻止$stateChangeStart 的默认设置来拦截它，但遇到了错误：

$digest() 达到了迭代次数。中止

这是由于$urlRouterProvider 和$stateProvider 之间的交互问题造成的，如here 所述。但即使我拦截成功，我也不确定这是否是正确的方法。那么究竟是什么原因造成的呢？或者我怎样才能找出导致重定向的原因。顺便说一句，我已经检查了$stateChangeError，但没有。

myApp.controller('MyController', ['$scope', '$stateParams', '$state', function ($scope, $stateParams, $state) {
 $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (toState.name == "view3" && fromState.name == "view2") {
        event.preventDefault();
    }
 });
});

Answer 1

我认为您的 response.details 包含非 url 编码字符，使路由提供商认为您正在导航到更深的页面，即 var response = {details:'bar/foo'}; 实际上会导航到 /view2/bar/foo，从而触发您的其他操作。

Answer 2

这有点像在黑暗中拍摄，但请尝试将您的 $urlRouterProvider 放在 $stateProvider 之前。我认为可能发生的情况是 $urlRouterProvider.otherwise() 正在充当观察者的全部内容，但是当它在范围内时，所有路由都已经通过。这意味着即使 $stateProvider 工作并将请求发送到正确的 URL，$urlRouterProvider.otherwise() 也会像没有发生一样捕获请求并将其发送到默认页面。

Answer 3

如果我理解您的问题，您想知道首先在哪里进行调试。我建议为您的 response.details 添加一个 console.log，因为您没有在问题中提供它。

我不认为这是您的定义中的操作顺序问题，因为您说这是在单击时发生的，当您调用 $state.go() 时。在您执行此操作的那一刻，路由器将尝试查找并质量您请求的状态。由于您的州有一个 URL，它还会尝试使用您提供的参数将用户发送到该 URL。

由于您的故障发生在那个时候，最合乎逻辑的解释是您的目标路由不可达，或者路由器认为它不可达。由于您的路由包含一个参数，这很可能意味着路由器不接受您的参数 - 此路径设置为需要该参数，因此如果它不存在（或未通过验证），您将触发.otherwise().

您可以很容易地排除这种情况，只需从 state2 的 URL 中删除参数即可。当然你想要它，但如果删除它可以让你达到状态，那么它就是参数。如果删除它仍然不允许您到达那里，那是另外一回事，您需要在 $state.go() 调用中设置一个断点并追踪它拒绝您的位置。确保在执行此操作时使用未缩小的文件。