控制器中ui路由器的參數和解析

Question

我已經配置了以下ui路由器。

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('global.editor', {
            url: '/posts/editor/{id}',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl',
            resolve: {
                post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
                    return codeService.getPost($stateParams.id)
                }]
            }
        }
        .state('global.new', {
            url: '/new',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl'
        })
        .state('global.newTRUE', {
            url: '/newTRUE',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl'
        })           
        .state('global.editor.panels', {
            controller: 'PanelsCtrl',
            params: { layout: 'horizontal' },
            templateUrl: function (params) { return "/htmls/" + params.layout + '.html' }
        }
}])

app.controller('EditorCtrl', ['$scope', '$state', function ($scope, $state) {
    $scope.layout = "horizontal";
    $scope.$watch('layout', function () {
        $state.go('global.editor.panels', { layout: $scope.layout });
    });
}]);

結果，瀏覽器中的https：// localhost：3000 /＃/ new導致（狀態為global.editor ，然后是）狀態global.editor.panels 。

現在，我想添加一個connected參數：

1. 我不希望它顯示在網址中
2. 瀏覽器中的https：// localhost：3000 /＃/ new使得connected為false ，瀏覽器中的https：// localhost：3000 /＃/ newTRUE使得connected為true
3. 可以將已connected的控制器EditorCtrl到控制器的EditorCtrl和PanelsCtrl
4. connected可以在可用的resolve的global.editor ; 理想情況下，我們可以根據的值來解決不同的對象connected 。

有誰知道如何做到這一點？

Answer 1

您可以為new和newTRUE添加解析：

 .state('global.new', {
     url: '/new',
     templateUrl: '/htmls/editor.html',
     resolve: {
         isConnected: function() {
             return false;
         }
     },
     controller: 'EditorCtrl'
 })
 .state('global.newTRUE', {
     url: '/newTRUE',
     templateUrl: '/htmls/editor.html',
     resolve: {
         isConnected: function() {
             return true;
         }
     },
     controller: 'EditorCtrl'
 })

在EditorCtrl（或PanelsCtrl）中，您可以像這樣使用它：

app.controller('EditorCtrl', ['$scope', '$state', 'isConnected', function($scope, $state, isConnected) {
    console.log("connected : " + isConnected); // you can save this value in Service and use it later.
    ...
}]);

Answer 2

您可以使用經典方法-解決

或者，您可以使用來自角度ui路由器的隱藏參數。 在您的父global狀態下定義params : {isConnected' : null} 。 在：

• global.newTRUE-在$ state配置中設置值
• global.new-在$ state配置中設置值
• global.editor.panels-在transition/go或ui-sref設置參數

定義是這樣的：

$stateProvider
      .state('global.newTRUE', {
        url : '/:newTRUE',
        params : {
          'isConnected' : false
        }
   });
}

在控制器中，您可以從$stateParams獲得。 這種方法的問題是刷新頁面中的隱藏參數丟失，除非設置了默認值

Answer 3

你肯定可以使用params UI-路由器狀態的配置，以在URL沒有表現出來，並實現所有提到的觀點。

此外，按照＃2的要求 ，對於/new ， connected必須為false ；對於/newTRUE ， connected必須為true 。 我們可以通過傳遞true或false作為這些狀態的默認值來實現。 像這樣：

$stateProvider
    .state('global.editor', {
        url: '/posts/editor/{id}',
        templateUrl: '/htmls/editor.html',
        params: { connected: null },
        controller: 'EditorCtrl',
        resolve: {
            post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
                return codeService.getPost($stateParams.id)
            }]
        }
    }
    .state('global.new', {
        url: '/new',
        templateUrl: '/htmls/editor.html',
        params: { connected: false }, // default false for /new
        controller: 'EditorCtrl'
    })
    .state('global.newTRUE', {
        url: '/newTRUE',
        templateUrl: '/htmls/editor.html',
        params: { connected: true }, // default true for /newTRUE
        controller: 'EditorCtrl'
    })           
    .state('global.editor.panels', {
        controller: 'PanelsCtrl',
        params: { layout: 'horizontal', connected: null },
        templateUrl: function (params) { return "/htmls/" + params.layout + '.html' }
    }

對於＃3，為了訪問connected在你的控制器（ EditorCtrl和PanelsCtrl ）你可以注入$stateParams到控制器，並使用$stateParams.connected得到它。

對於＃4 ，（ 或多或少與實現＃3相似 ）

就像你得到$stateParams.id ，你可以有$stateParams.connected還有，你可以用它根據價值來解決不同的對象connected 。 像這樣：

.state('global.editor', {
    url: '/posts/editor/{id}',
    templateUrl: '/htmls/editor.html',
    params: { connected: null },
    controller: 'EditorCtrl',
    resolve: {
        post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
            return $stateParams.connected ? 
                codeService.getPost($stateParams.id) :
                codeService.getSomethingElse($stateParams.id) 
        }]
    }
}

但是，要使其正常工作，請確保在訪問global.editor state（使用$state.go或ui-sref ）時， global.editor connected傳遞為參數。

希望這可以幫助！