Angular 1.3 + ui-router + генератор-ng-poly встраивание вложенных (?) Представлений не работает

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

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

Сначала я создал «домашний» модуль, а затем внутри него модуль «заголовок». Так...

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

Что дает мне эти два контроллера: app/home/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'
      });
  }

})();

и app/home/header/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'
      });
  }

})();

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

<div ui-view=“header”></div>

or

<div ui-view=“home.header”></div>

должно сработать. Но это не так. Многочасовое гугление не помогло, так как во всех примерах используется более распространенный формат $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?


person TheOncomingCode    schedule 01.03.2015    source источник


Ответы (2)


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

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

Если вы регистрируете только одно состояние, например contacts.list, вы ДОЛЖНЫ определить состояние с именем contacts в какой-то момент, иначе никакие состояния не будут зарегистрированы. Состояние contacts.list будет поставлено в очередь, пока не будет определено contacts. Если вы сделаете это, вы не увидите никаких ошибок, поэтому будьте осторожны, определяя родителя, чтобы дочерний элемент был правильно зарегистрирован. - Вложенные состояния

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

<div ui-view></div>

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

$state.go('home');
person Matt Tester    schedule 01.03.2015
comment
Он хочет иметь страницу, на которой есть разные модули/представления, такие как заголовок, боковая панель, нижний колонтитул, которые одновременно включены в страницу, но находятся в отдельных модулях. - person Saša Šijak; 07.05.2015
comment
@saša-Šijak это правильно. Моей целью было построить страницу из отдельных модулей/компонентов. - person TheOncomingCode; 13.05.2015
comment
Поздравляем с участием в книге Пола Форда «Что такое код?» :) bloomberg.com/graphics /2015-пол-форд-что-есть-код/ - person JoeCool; 02.03.2021

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

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

$stateProvider
  .state('home.header', {...})
person bFunc    schedule 12.05.2015
comment
Я хочу, чтобы страница index.html была базовой страницей с 3 фиксированными элементами, которые будут отображаться на каждом URL-адресе сайта, но будут жить в отдельных модулях: нижний колонтитул, заголовок, боковая панель. И область динамического содержимого в середине страницы, которая будет меняться при изменении URL-адреса. Я не могу понять, как это сделать с помощью ui-router, приведите пример в шаблоне и маршрутах. - person Saša Šijak; 14.05.2015