Параметр ui-router в контроллере и разрешить

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/ в браузере приводит к (состояние global.editor, то к) государству global.editor.panels,

Теперь я хочу добавить параметр connected:

1. Я не хочу, чтобы это было показано в URL
2. https://localhost:3000/ в браузере делает connected быть falseи https://localhost:3000/ в браузере делает connected быть true
3. connected можно пройти в контроллер EditorCtrl а также PanelsCtrl
4. connected могут быть доступны в resolve из global.editor; в идеале мы могли бы разрешить различные объекты в соответствии со значением connected,

Кто-нибудь знает, как этого добиться?

Answer 1

Вы можете использовать params UI-Router заявляет "config", чтобы он не отображался в URL и достигал всех упомянутых пунктов.

Кроме того, согласно № 2, вам нужно connected быть false за /new а также true за /newTRUE, Мы можем сделать это, передав 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) 
        }]
    }
}

Но, чтобы это работало, убедитесь, что вы проходите connected в качестве параметров, когда вы посещаете global.editor состояние (используя $state.go или же ui-sref)

Надеюсь это поможет!

Answer 2

Вы можете использовать классический подход - в решимости

Или вы можете использовать скрытые параметры от углового интерфейса UI. определять params : {isConnected' : null} в твоих родителях global государство. В:

• global.newTRUE - установить значение в $ state config
• global.new - установить значение в $ state config
• global.editor.panels - установить параметры в transition/go или же ui-sref

определение таково:

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

и в контроллере вы получаете от $stateParams, Проблема этого подхода в том, что скрытые параметры теряются на странице обновления, кроме случаев, когда установлено значение по умолчанию.

Answer 3

Вы можете добавить решимость для новых и новых TRUE:

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