Angular UI Router - 使用 ui-sref 导航到动态状态时会出现双斜线 [英] Angular UI Router - Dynamic states get double slashes when navigated to with ui-sref

问题描述

我正在创建一个 CMS 系统，所以我希望动态创建状态.由于您无法在配置阶段发出 http 请求，因此我决定在 .run() 函数中添加我的路由，如下所述:http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app

I'm creating a CMS system so I want the states to be dynamically created. Since you can't make http requests within the config phase I decided to add my routes in the .run() function as described here: http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app

现在，当我使用 ui-sref 指令在导航部分中显示链接列表时，附加的 url 有 2 个正斜杠而不是一个.控制器和所有东西都被相应地调用，但我似乎无法摆脱双斜线.有什么想法吗?

Now when I display a list of links in my navigation partial using the ui-sref directive the url that is appended has 2 forward slashes instead of one. The controller and everything is called accordingly but I can't seem to get rid of the double slashes. Any ideas?

相关代码如下:

app.js

var $stateProviderReference;

angular.module('app', [
    'ui.router',                // Angular UI Routing
    'ngStorage',                // Angular Storage (local, cookies, session)
    'ngAnimate',                // Angular Animation
    'angular-loading-bar',      // Angular Loading Bar
    'restangular',              // Restangular
    'angular.assets.injector',  // Custom assets injector
])
.config(function($stateProvider, $urlRouterProvider, RestangularProvider, $httpProvider, cfpLoadingBarProvider){

    // Save a reference of our stateProvider
    $stateProviderReference = $stateProvider;

    // Irrelevant configuration

    // States (routes)
    $stateProvider

        /*
         |
         | Frontend
         |
         */
        .state('frontend', {
            url: '/',
            views: {
                '': { 
                    templateUrl: 'app/views/frontend/templates/default/bootstrap.html',
                    controller: 'FrontendCtrl'
                },
                'nav@frontend': {
                    templateUrl: 'app/views/frontend/templates/default/partials/navigation.html',
                    controller: 'NavCtrl',
                    resolve: {
                        pages: function(PageService){
                            return PageService.all();
                        }
                    }
                },
                'footer@frontend': {
                    templateUrl: 'app/views/frontend/templates/default/partials/footer.html',
                    controller: 'FooterCtrl'
                },
                'page@frontend': {
                    templateUrl: 'app/views/frontend/pages/page.html',
                    controller: 'PageCtrl'
                }
            }
        });

.run(function($rootScope, $location, $state, $stateParams, AuthService, CSRF_TOKEN, PageService){

    // Retrieve all the pages
    PageService.all().then(function(pages){

    // Loop through all the pages
    angular.forEach(pages, function(page){

        // If this is not the homepage
        if( page.routeName !== 'frontend' )
        {
            // Add a state to our stateProvider
            $stateProviderReference.state(page.routeName, {
                // Set the desired url
                url: page.url,
                // Views that we are populating
                views: {
                    // Override the page view partial
                    'page@frontend': {
                        templateUrl: 'app/views/frontend/pages/page.html',
                        controller: 'PageCtrl'
                    }
                }
            });
        }

    });

});

navigation.html 部分

navigation.html partial

<ul class="nav navbar-nav">
    <li ng-repeat="page in pages">
        <a ng-class="{'active': isActive({{page.routeName}})}" ui-sref="{{ page.routeName }}">{{ page.title }}</a>
    </li>
</ul>

从数据库中检索的页面数据格式如下:

Page data being retrieved from the db is formatted like this:

{
    id: 1,
    routeName 'frontend.home',
    title: 'Homepage',
    url: '/home',
    metaData: {
        tags: "some random tags",
        desc: "some random description"
    },
    content: "Html goes here",
    deletable: 'yes' // or 'no'
}

所以除了双斜线之外，一切似乎都有效.当我点击为上述示例代码生成的链接时，它会将我发送到以下网址:

So everything seems to work except for the double slashes. When I click on the link generated for the above sample code it will send me to the following url:

http://localhost/CMSv2/public/#//home

代替

http://localhost/CMSv2/public/#/home

我尝试从 routeName 属性中删除正斜杠，然后它没有附加双斜杠，但无法再访问控制器，一切似乎都坏了.

I have tried removing the forward slash from the routeName property and then it does not append the double slashes but the controller can't be reached anymore and everything seems to break.

推荐答案

问题来自这样一个事实，如果有 state parent - child 他们的 url 是 parent.url + child.url:

The issue comes from the fact, that if there are states parent - child their url is parent.url + child.url:

• parent: .state('frontend', { url: '/',...
• child: { routeName 'frontend.home', url: '/home',..
• 结果:'/' + '/home' === '//home'

但是，ui-router 中内置了一个很好的解决方案:

But again there is a nice solution built into the ui-router:

• 绝对路由 (^)

小引用:

如果你想有绝对的 url 匹配，那么你需要在你的 url 字符串前加上一个特殊符号^".

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

解决方案:(在这种情况下非常简单)

代替这个 url def:

Instead of this url def:

{
    id: 1,
    routeName 'frontend.home',
    title: 'Homepage',
    url: '/home',
    ...

我们只需要路径这个url: '^/home',:

We just will path this url: '^/home',:

{
    id: 1,
    routeName 'frontend.home',
    title: 'Homepage',
    url: '^/home',
    ...

这篇关于Angular UI Router - 使用 ui-sref 导航到动态状态时会出现双斜线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！