дочерний элемент по умолчанию внутри отца в $stateprovider с машинописным текстом

У меня есть отец html-страницы с:

<div id="..." class="container">
   <pp-nav></pp-nav>
   <div ui-view></div>
</div>

Это мой контроллер с отцом и двумя детьми:

export function routerConfig($stateProvider: angular.ui.IStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider) {
$stateProvider
.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html'
})
.state('gestionePeP.puntiAttivazione', {
  url: '/puntiAttivazione',
  templateUrl: '.../gestionePeP/puntiAttivazione.html'
})
.state('gestionePeP.gestioneContenuti', {
  url: '/gestioneContenuti',
  templateUrl: '.../gestionePeP/gestioneContenuti.html'
});

Я хочу, чтобы, когда я перехожу на отцовскую страницу, stateprovider открывал отцовскую html-страницу с первым дочерним элементом внутри нее. Как мне это сделать?

Если я поставлю ссылку внутри кнопки в отце с

ui-sref="gestionePeP.puntiAttivazione"

он открывает нужную страницу. Но я хочу такое же поведение без щелчка. Я попробовал $state.go('gestionePeP.puntiAttivazione'), но он зацикливается. Как я могу решить?


typescript state angular-ui-router angular-ui
person Ciro    schedule 17.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Все еще лучший способ, который я нашел, здесь:

Перенаправить состояние в подсостояние по умолчанию с помощью UI-Router в AngularJS

просто добавьте эти строки в какой-нибудь .run()

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

И расширите определение состояния по умолчанию redirectTo:

.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html',
  // this will set redirect target
  redirectTo: 'gestionePeP.puntiAttivazione',
})

Проверьте эту ссылку, чтобы найти работающий плункер.

EXTEND — как сообщить ng.ui.IState о новом свойстве redirectTo?

Просто добавьте эти строки в свой код:

declare module angular.ui { export interface IState { redirectTo?: string; } }
person Radim Köhler    schedule 17.11.2015
comment
redirectTo не существует в типе IState. - person Ciro; 18.11.2015
comment
Не так уж сложно сделать его частью IState, правда? ;) Расширенный ответ должен показать, как;) - person Radim Köhler; 18.11.2015
comment
Я не знаю, куда добавить функцию app.run - person Ciro; 18.11.2015
comment
Вы наблюдали за моим плунжером? - person Radim Köhler; 18.11.2015
comment
Да, но у меня нет файла app.js - person Ciro; 18.11.2015
comment
вы можете разместить его где угодно - как есть. Просто используйте переменную app или используйте angular.module(xxx)... остальное работает даже с TS. И его можно было разместить в любом файле. как только angular загрузит весь скрипт, он начнет выполнять их в правильном порядке. Сначала настроить, потом запустить... Я действительно не понимаю, в чем проблема. - person Radim Köhler; 18.11.2015
comment
Да я нашел куда поставить функцию и работает! Большое спасибо! - person Ciro; 18.11.2015
comment
Отлично. Действительно! Наслаждайтесь мощной комбинацией - angular, UI-Router и TypeScript;) - person Radim Köhler; 18.11.2015