无法使用 URL 导航到 ui-router 状态 [英] Can't navigate to ui-router state with URL

问题描述

我正在使用 ui-router 开发一个简单的 angular 应用程序.我有几个状态用于选择然后编辑有关发布者的信息.相关配置:

I'm working on a simple angular application using ui-router. I have a couple states for selecting and then editing information about a publisher. The relevant config:

            .state('select-publisher', {
                url: '/select-publisher',
                templateUrl: '/Content/superadmin/src/templates/publishers/publishers.html'
            })

            .state('publisher', {
                abstract: true,
                url: 'publisher/{id:int}',
                templateUrl: '/Content/superadmin/src/templates/publishers/publisher.html'
            })
            .state('publisher.details', {
                url: '/details',
                templateUrl: '/Content/superadmin/src/templates/publishers/details.html'
            })
            .state('publisher.ad-tags', {
                url: '/ad-tags',
                templateUrl: '/Content/superadmin/src/templates/publishers/ad-tags.html'
            })
            .state('publisher.native-ads', {
                url: '/native-ads',
                templateUrl: '/Content/superadmin/src/templates/publishers/native-ads.html'
            })

在 select-publisher 状态中，我有大量可用的发布者列表.它们中的每一个都绑定到一个 ng-click 事件，该事件在我的控制器中触发以下功能:

Inside the select-publisher state I have a big list of available publishers. Each one of them is bound to an ng-click event that triggers the following function in my controller:

 $scope.selectPublisher = function(publisher) {
     publisherService.setSelectedPublisher(publisher);
     $state.go('publisher.details', {id: publisher.Id});
 };

这很好用，并将我带到publisher.details 状态并呈现正确的视图.此时浏览器中的 URL 指向 localhost:1337/superadmin#/publisher/39/details，其中 39 是我选择的发布者的 ID.

This works just fine and takes me to the publisher.details state and renders the proper view. At this point the URL in my browser points to localhost:1337/superadmin#/publisher/39/details where 39 is the ID of the publisher that I selected.

问题是，如果我刷新此页面或尝试通过将 URL 从应用程序的另一个区域粘贴到浏览器中直接导航到它，我总是被带回 select-publisher状态.我希望能够配置我的状态，以便我能够根据 URL 导航到详细信息状态(或任何其他状态).

The problem is, if I refresh this page or attempt to navigate directly to it by pasting the URL into the browser from another area of the application, I am ALWAYS taken back to the select-publisher state. I would like to be able to configure my states such that I am able to navigate to the details state (or any other state) based on URL.

值得注意的是，我确实在所有状态之后定义了一条 catch all 路由:

Worth noting is that I do have a catch all route defined after all of my states:

$urlRouterProvider.otherwise('/select-publisher');

我假设这是由于某种原因触发的，但我无法解释为什么导航在我的应用程序中使用 $state.go 工作，正如我在控制器中指出的那样以及在我的 HTML 模板中使用 ui-sref 指令，但不是通过直接导航到 URL.

I'm assuming that for some reason this is being triggered but I can't reason as to why navigation works in my app using either $state.go as I have indicated in my controller as well as using ui-sref directive in my HTML templates but not through navigating directly to the URL.

推荐答案

可能是因为缺少斜线 url: /publisher/{id:int}

Maybe it's because of missing slash url: /publisher/{id:int}

这篇关于无法使用 URL 导航到 ui-router 状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！