Angular 1.3 + ui-router + generator-ng-poly вложение вложенные (?) представления не работают

Я новичок в Angular, ui-router и generator-ng-poly, и я надеюсь, что кто-то может помочь с тем, что, вероятно, является простым синтаксисом проблема.

Я использую generator-ng-poly для нового проекта и работаю из "примера Deep Level" с помощью приложения Angular 1.3 с использованием ui-router и HTML.

Сначала я создал "домашний" модуль, а затем модуль "header". Так что...

 yo ng-poly:module home
 yo ng-poly:module home/header

Что дает мне эти два контроллера: приложение/дома/home.js

    (function () {
  'use strict';

  /* @ngdoc object
   * @name home
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home', [
      'ui.router',
      'home.header'
    ]);

  angular
    .module('home')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      });
  }

})();

и приложение/дома/заголовок/header.js

(function () {
  'use strict';

  /* @ngdoc object
   * @name home.header
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home.header', [
      'ui.router'
    ]);

  angular
    .module('home.header')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('header', {
        url: '/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'HeaderCtrl',
        controllerAs: 'header'
      });
  }

})();

Теперь я хочу использовать "header" из home.tpl.html, и я борюсь с тем, как это сделать. Из того, что я понимаю,

<div ui-view="header"></div>

или

<div ui-view="home.header"></div>

должен работать. Но нет. Часы работы в Google не помогли, так как все примеры используют более общий формат $stateProvider, где есть такие цепные состояния:

$stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      })
      .state('home.header', {
        url:'/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'header/header-controller.js',
        controllerAs: 'header'
      });

Как я должен ссылаться на "заголовок", чтобы он отображался правильно внутри home.tpl.html?

Ответы

Ответ 1

Чтобы иметь возможность использовать состояние header в состоянии home, они должны быть вложены (привязаны). Ваше приложение может находиться только в одном состоянии одновременно, но вложенные состояния требуют разрешения, которое вам нужно.

Итак, это не очевидно, но вы можете смело сделать одно состояние родителем другого в отдельных файлах/конфигах из-за того, как работает регистрация (акцент мой):

Если вы зарегистрируете только одно состояние, например contacts.list, вы должны в определенное время определить состояние с именем contacts, иначе никакие состояния не будут зарегистрированы. Состояние contacts.list будет поставлено в очередь до contacts. Если вы это сделаете, вы не увидите никаких ошибок, поэтому будьте осторожны, чтобы вы определили родителя, чтобы ребенок получил надлежащую регистрацию. - Вложенные государства

Кроме того, атрибут ui-view не принимает имя состояния, которое вы хотите, как показано в вашем примере. Вместо этого создается именованный вид (очень мощная функция - Несколько именованных просмотров), но кое-что вам, вероятно, пока не нужно. Просто оставьте это как:

<div ui-view></div>

Итак, чтобы установить приложение в правильное состояние, используйте функцию $state.go(): например.

$state.go('home');

Ответ 2

точно не понял вашу целевую цель. Вы хотите добавить именованный заголовок вида на уровень вашего основного вида дома (см. Multiple-Named-Views) или простое вложенное представление?

Если это так, вы не должны указывать вам имя ui-view в html, и определить имя дочернего маршрута с точечным синтаксисом, чтобы вывести вашу иерархию в $stateProvider, например:

$stateProvider
  .state('home.header', {...})