Angular UI 路由器 - 使用 ui-sref 导航到动态状态时会出现双斜杠

2022-01-21 00:00:00 angularjs javascript angular-ui-router

我正在创建一个 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.

推荐答案

问题出在这样一个事实，如果有父子状态，他们的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:

  • 父级:.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',
    ...

相关文章