角UI路由器 - 当与UI的SREF导航到动态状态得到双斜杠 [英] Angular UI Router - Dynamic states get double slashes when navigated to with ui-sref

问题描述

我创建一个CMS系统，所以我想动态创建的状态。由于无法在配置阶段中发出HTTP请求，我决定加入的。运行（）函数，我的路线如下所述：的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?

下面是相关code：

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'
}

所以，一切似乎除了双斜杠工作。当我点击上面的示例code生成的链接，它会送我到以下网址：

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添加。
删除多余的初始斜线，设置前端-状态抽象，并清除URL，如下所示：

Since your home-state is derived from the frontend-state, the additional slash is added from the frontend-url. To remove the extra initial slash, set the frontend-state to "abstract" and clear the url like so:

.state('frontend', {
    abstract: true,
    url: '',
    templateUrl: 'yourTemplate.html'
})

这更符合您的结构为好，因为前端状态URL从未使用过。

This better corresponds to your structure as well, since the frontend-state url is never used.

这篇关于角UI路由器 - 当与UI的SREF导航到动态状态得到双斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！