Угловой UI-маршрутизатор $urlRouterProvider.когда не работает *больше*

вопрос: почему не будет .when() в своем $urlRouterProvider больше работать?

я подобрал довольно надежное угловое приложение. Последней проблемой, которую я пытался исправить, была проблема "учетные данные пользователя, потерянные при обновлении страницы".

угловая сторона клиента-auth)

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

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

Итак ,это код $ urlRouterProvider, который я использую. Стоит отметить, что я включил / потребовал .when(), тогда как угловая сторона клиента-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. Вы можете нажать на ID, который вызывает функцию, которая устанавливает ID, а затем выполняет $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); это состояние курс заменяет вызвали список", который щелкнул пользователь.

теперь .state()'ы...

.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's 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')} to $state.includes('app.myState.group')}. Нет. Это жизнеспособно? Я знаю, что мне придется как-то передать удостоверение, но оно даже не кажется направляющим.

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

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

редактировать

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

.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-breaking change

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

угловой UI-маршрутизатор $urlRouterProvider .когда не работает, когда я нажимаю

оригинал:

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

во-первых, давайте иметь две функции, чтобы настроить

  • $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) 

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

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

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

проверить здесь. Вижу app.js...

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