如何使用AngularJs ui-router添加可选的$ stateParams?

时间:2016-04-27 15:04:49

标签: javascript angularjs angular-ui-router

我想在$stateParams下面添加可选的$state,让我说我目前有processId,我想将assessmentId添加为可选params。我的目标是从应用程序中的两个位置启动相同的模板和控制器,它将基于$stateParams启动。

我怎样才能完成这项任务? app.js

添加挑战

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge',
            params: { processId: null,assessmentId:null},
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

编辑挑战

.state('app.editPrcChallenge', {
            url: '/edit/prcChallenge/:challengeKey/processId?/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },

3 个答案:

答案 0 :(得分:1)

直接在网址中提及可选参数的?后缀:

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId?',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});

您可以在此更改后忽略params属性,因为params属性用于定义不作为URL的一部分显示的参数

答案 1 :(得分:0)

您的网址属性应如下所示:

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge/:processId/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

答案 2 :(得分:0)

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   params: {
     processId: null,
     assessmentId: null
   }
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});