如何使用 AngularJs ui-router 添加可選的 $stateParams？

Question

我想將可選的$stateParams添加到$state以下，假設目前我有processId並且我想添加assessmentId作為可選params 。 我的目標是從應用程序的兩個位置啟動相同的模板和控制器，它將基於$stateParams啟動。

我怎樣才能完成這項任務？ 應用程序.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
            },

Answer 1

直接在 url 中用? 可選參數的后綴：

.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 一部分出現的參數

Answer 2

你的 URL 屬性應該是這樣的：

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

Answer 3

.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;
     }
   }
});