AngularJS Переход к одноуровневому абстрактному состоянию от родственного

Я работаю с angular-ui-router и пытаюсь перейти к дочернему элементу одного из моих абстрактных состояний из другого дочернего элемента того же абстрактного. эта диаграмма показывает Идею немного лучше:

абстрактное дерево

Итак, где «R» — это, скажем, модуль, а «синий 1» — мое абстрактное состояние с

<ui-view/>

У меня зеленая «1» автоматически загружается в представление. у меня проблемы с переходом к красной «2» из ui-sref в зеленой «1». есть ли что-то, что я должен сделать, в частности, чтобы перейти в состояние blue '1' или абстрактное состояние, а затем загрузить состояние 'red2'?

::ПРИМЕЧАНИЕ:: если я помещу вызов ui-sref в шаблон рефератов и вызову его оттуда, изменение состояния сработает.

вот моя настройка состояния в app.js:

var app = angular.module( 'app', [ 'ui.router' ] );

app.config( function( $stateProvider, $urlRouterProvider ) {
     $stateProvider
        .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
}

а вот пример papers.home.html:

<h3>
    <a ui-sref="Papers.paper1">
        click me for paper 1
    </a>
</h3>

<h3>
    <a ui-sref="Papers.paper2">
        click me for paper 2
    </a>
</h3>

по какой-то причине я не могу перейти в другие состояния из родственного состояния абстрактного родителя, есть идеи, почему?


state angularjs nested angular-ui-router siblings
person Eolis    schedule 25.02.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Дело в том, что я использовал ваше определение 1 : 1 - и оно работает.

var app = angular.module( 'app', [ 'ui.router' ] )

.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Papers');

    .state( 'Papers',  {
        url: "/Papers",
        abstract: true,
        template: '<ui-view />'
    }) // nested paper states
    .state( 'Papers.home', {
        url: '', // default load, no path defined
        templateUrl: 'templates/views/connect/Papers.home.html',
        controller: 'whitePapersController'
    })
    .state( 'Papers.paper1', {
        url: '/paper1',
        templateUrl: 'templates/views/connect/Papers.paper1.html',
        controller: 'PapersController'
    })
    .state( 'Papers.paper2', {
        url: '/paper2',
        templateUrl: 'templates/views/connect/Papers.paper2.html',
        controller: 'PapersController'
    });  
    }
])
.controller('whitePapersController', ['$scope', function ($scope) { 
}])
.controller('PapersController', ['$scope', function ($scope) { 
}])

Итак, это работает. Как есть. Проверьте этот пример и сравните с вашим местным решением, и вы должны найти проблему.

person Radim Köhler    schedule 26.02.2015
comment
Спасибо! с этим я смогу увидеть, где моя проблема. Со временем я понял, что это должно быть что-то с моим кодом, поскольку я не могу придумать причину, по которой нельзя было бы перейти в одноуровневое состояние из родственного состояния абстрактного. - person Eolis; 26.02.2015
comment
Большой! UI-Router действительно предсказуем. Желаю вам это сделать :) - person Radim Köhler; 26.02.2015

arrow_upward
0
arrow_downward

Попробуйте добавить следующий вывод console.log в самый верхний контроллер.

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ 
  console.log('$stateChangeError', error');
})

Также добавить

$rootScope.$on('$stateNotFound', 
function(event, unfoundState, unfoundStateParams, fromState, fromParams, error){ 
  console.log('$stateNotFound', unfoundState, unfoundStateParams, fromState, fromParams);
})

Один из них должен сказать вам, что происходит

person Vlad Gurovich    schedule 25.02.2015
comment
Добавлено: он не создал журнал, поэтому кажется, что изменение состояния не вызывается при нажатии на ссылку. - person Eolis; 26.02.2015
comment
Добавлен еще один оператор журнала. Есть ли ошибки в консоли разработчика? - person Vlad Gurovich; 26.02.2015
comment
Нет до сих пор нет ошибок. щелчок по ui-sref во вложенном состоянии не вызывает событие изменения состояния. Я делаю plunkr сейчас. - person Eolis; 26.02.2015
comment
да, пожалуйста, сделайте plunkr. Каждый раз, когда у меня возникали проблемы с изменением состояния, добавление прослушивателей событий состояния помогало мне понять, что происходит. - person Vlad Gurovich; 26.02.2015
comment
Другой парень опередил меня в плункере, НО он отлично работает и в нем также есть несколько отличных журналов. Спасибо за ваш отзыв! Я сохранил ваши журналы на случай возникновения проблем в будущем. - person Eolis; 26.02.2015