简体   繁体   English

将当前参数设置为ui-sref

[英]Set current params to ui-sref

I'm trying to send the current item id from the url to each state from ui-sref in navigation: 我正在尝试将url中的当前项目id从导航中的ui-sref发送到每个状态:

index.html: index.html:

<body ng-controller="mainController as main" class="animated fadeIn">
    <!-- Working Group Header -->
    <div ng-include=" './partials/navigation.html' "></div>

    <!-- Routes -->
    <ui-view></ui-view>
</body>

navigation.html: navigation.html:

<ul >
    <li>
        <a title="About" ui-sref="about({id: id})">About</a>
    </li>
    <li>
        <a title="Files" ui-sref="files({id: id})">Files</a>
    </li>
    <li>
        <a title="Demos" ui-sref="demos({id: id})">Demos</a>
    </li>
</ul>

My routing looks like this: 我的路由如下所示:

.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
    //FOR UNMATCHED URL, REDIRECT TO HOME
    $urlRouterProvider.otherwise('about')

    // Set up routes
    $stateProvider
        .state('about', {
            url: '/wg/{id}/about',
            templateUrl: './partials/about.html',
            controller: 'aboutController'
        })
        .state('files', {
            url: '/wg/{id}/files',
            templateUrl: './partials/files.html',
            controller: 'filesController'
        })
        .state('demos', {
            url: '/wg/{id}/demos',
            templateUrl: './partials/demos.html',
            controller: 'demosController'
        })

   $compileProvider.debugInfoEnabled(false);
})

MainController: 主控制器:

    wg.controller('mainController', function($scope, $timeout, $stateParams){
    console.log('Entered home controller ')

    $scope.id = $stateParams.id;

})

My URL: 我的网址:

index.html#/wg/123/about index.html#/ wg / 123 / about

However, when I check the url I get back i 但是,当我检查网址时,我回来了

index.html#/wg//about index.html#/ wg //关于

In the $stateProvider defination you need to change the syntax of param from {id} to :id . $stateProvider定义中,您需要将param的语法从{id}更改为:id Then the id should be accessible to controller using $stateParams.id after injecting $stateParams . 然后,在注入$stateParams之后,控制器应该可以使用$stateParams.id访问该id

$stateProvider
        .state('about', {
            url: '/wg/:id/about',
            templateUrl: './partials/about.html',
            controller: 'aboutController'
        })
        .state('files', {
            url: '/wg/:id/files',
            templateUrl: './partials/files.html',
            controller: 'filesController'
        })
        .state('demos', {
            url: '/wg/:id/demos',
            templateUrl: './partials/demos.html',
            controller: 'demosController'
        })

Controller Example: 控制器示例:

.controller('demosController', ['$scope','$stateParams',function($scope, $stateParams) {
   $scope.id = $stateParams.id;  // <------ id now should be available in the child route controller
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM