Angular UI-Router $urlRouterProvider.when не работает * больше *

Вопрос: Почему не будет .when() в моей $urlRouterProvider работе?

Я нашел довольно надежное приложение angular. Самая последняя проблема, которую я пыталась исправить с помощью этой проблемы, - это проблема "учетные данные пользователя, потерянные при обновлении страницы".

Служба аутентификации проекта не имела большого смысла, когда я ее поднял, и после того, как я рылся, я узнал, что она была собрана из нескольких случайных страниц кода. Он также не работал полностью, поэтому я заглянул в разные источники и решил полностью реализовать один из них (angular-client-side-auth)

Теперь, служба auth service/controller, которую я реализовал, в основном такая же, как в angular -client-side-auth, однако на моем сайте используется аутентификация на основе токенов. Функциональность маркера уже была на месте, поэтому у меня не было никаких проблем с ее работой.

На этом этапе у меня есть пользователь, который остается включенным при обновлении, маршруты работают вместе с их аутентификацией (ранее использовался массивный код для отключения отображаемых элементов). Однако теперь $urlRouterProvider .when() нарушены. Они отлично работали раньше, поэтому я знаю, что я сделал, это вина, но я не могу просто отменить то, что я реализовал!

Итак, это код $urlRouterProvider, который я использую. Стоит упомянуть, что я включил/потребовал .when(), тогда как angular-client-side-auth, похоже, не использовал их. Я ожидал, что они могут быть реализованы с помощью этого кода, однако, возможно, в нем есть что-то, что лишает функциональность .when()? Я так не думал. Возможно также уточнить, что я еще не использовал .rule или $httpProvider.interceptors. Я пробовал использовать сайт с этими реализованными, но они, похоже, не меняли.

$urlRouterProvider
   .when('/myState/group', ['$state', 'myService', function ($state, myService) {
            $state.go('app.myState.group.id', {id: myService.Params.id});
   }])
   .otherwise('/');

В принципе, если пользователь или сайт направляют пользователя на /myState/group, они должны на самом деле заканчиваться на url для состояния app.myState.group.id правильно? Но они этого не делают, и я не могу понять, почему. Там не так много вопросов по использованию urlRouterProvider.

Что происходит? Хорошо представление для /myState/group загружается отлично, а внутри него <ui-view> - сгенерированный список id. Вы можете нажать на идентификатор, который вызывает функцию, которая устанавливает идентификатор, а затем выполняет $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); Это состояние, конечно, заменяет "сгенерированный список", который пользователь нажал.

Теперь, для .state() 's...

.state('app.myState', {
            abstract: true,
            url: '/myState',
            templateUrl: 'views/myState.html',
            data: {
                access: access.user
            },
            controller: 'MyCtrl',
            resolve: {
                // bunch of stuff here, I'll include it if it relevant                    
            },
            redirectMap: {
                '409': 'app.error'
            }
        })
        .state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            }
        })
        .state('app.myState.group.id', {
            url: '/:id',
            templateUrl: 'views/myState.group.id.html',
            data: {
                access: access.user
            },
            resolve: {
                '': function (myService) {
                    myService.stuff.get(false, false, 7, 0).then(function (data) {
                    });
                }
            },
            controller: 'MygroupidCtrl'
        })

Наконец, index.html

<li ng-class="{active: $state.includes('app.myState')}"> <a ui-sref="app.myState.group">My State</a> </li>

Как-то я чувствую, что есть лучший способ структурировать это. Из того, что я могу сказать, app.myState.group никогда не требуется сама по себе, это просто часть вложенности.

Я попытался просто изменить ui-sref на ="app.myState.group.id". Когда это не сработало, я также изменил $state.includes('app.myState')} на $state.includes('app.myState.group')}. Неа. Является ли это жизнеспособным? Я знаю, что мне нужно будет каким-то образом передать идентификатор, но это даже не кажется направлением.

В идеале я хотел бы ограничить количество ненужных состояний (и контроллеров.. и всего). Поскольку пользователь предположительно должен быть принят непосредственно к /myState/group/id, когда они нажимают на ссылку, я чувствую, что это должно произойти. Не это связано с другим состоянием, а затем с перенаправлением!

Тем не менее, мне больше нужно просто заставить это работать в данный момент, и я могу беспокоиться о том, чтобы очистить вещи позже.

EDIT

Поэтому, когда я писал этот вопрос, я получал еще несколько идей, чтобы попробовать. Один из них действительно работает!

.state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            },
            onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
                $timeout(function () {
                     $state.go('app.myState.group.id', {id: myService.Params.id})
                }, 1000);
            }]

Мне это нравится, хотя мне все еще интересно, есть ли другие способы сделать это. Мне также все еще интересно, почему $urlRouterProvider перестает работать!

Ответы

Ответ 1

EDIT: версия 0.2.13 - нарушение изменения

Оригинальный пост работал с UI-Router 0.2.12-. Исправление в 0.2.13 отключает это решение. Пожалуйста, следуйте обходному пути здесь:

Angular UI-Router $urlRouterProvider. Когда он не работает, когда я нажимаю < ai-sref = "..." →

ОРИГИНАЛ:

Есть одна проблема, я обнаружил, что вызывает подобную проблему. Существует рабочий пример с полным кодом

Во-первых, пусть у вас есть две функции для настройки

  • $urlRouterProvider и
  • $stateProvider

Отрывок из этих исправлений:

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

После этого сообщаемое поведение будет развиваться, если мы будем называть их следующим образом:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig)

Вышеуказанный вызов не будет работать. Когда не будет отображаться состояние детали при посещении списка.

Но это будет работать, как ожидалось:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

Отметьте здесь. Смотрите файл app.js...

АННОТАЦИЯ: Мы просто должны сначала настроить $urlRouterProvider. Только тогда мы можем начать заполнять наши состояния через $stateProvider. Такой подход приведет к ожидаемому поведению.