13

I am new to Angular, ui-router and generator-ng-poly and am hoping someone can help with what is likely a simple syntax issue.

I am using generator-ng-poly for a new project and working from the "Deep Level Example" with an Angular 1.3 based app using ui-router and HTML.

First I created a "home" module, then a "header" module inside that. So...

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

Which gives me these two controllers: 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'
      });
  }

})();

and 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'
      });
  }

})();

Now I want to use the "header" from within home.tpl.html and I am struggling with how to do this. From what I understand either

<div ui-view=“header”&gt;</div>

or

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

should work. But neither is. Hours of Googling has not helped since all the examples use the more common $stateProvider format where there are chained states like so:

$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'
      });

How should I be referencing "header" to have it show up properly inside home.tpl.html?

4

2 回答 2

3

为了能够在header状态中使用home状态，它们将需要嵌套（chained）。您的应用程序一次只能处于一种状态，但嵌套状态需要允许您需要的使用。

因此，这并不明显，但是由于注册的工作方式（重点是我的），您可以安全地在单独的文件/配置中将一个状态设置为另一个状态的父级：

如果您只注册一个状态，例如contacts.list，您必须定义一个contacts在某个时间点调用的状态，否则将不会注册任何状态。状态contacts.list将排队，直到contacts被定义。如果这样做，您将不会看到任何错误，因此请小心定义父级，以便子级正确注册。-嵌套状态

此外，该ui-view属性不会采用您在示例中显示的所需状态的名称。相反，它创建了一个命名视图（一个非常强大的功能 -多个命名视图），但您可能还不需要一些东西。只是离开是这样的：

<div ui-view></div>

所以要将应用程序设置为正确的状态，请使用$state.go()函数：例如

$state.go('home');
于 2015-03-01T23:08:34.947 回答
2

没有完全理解你的目标。您想在主视图主页（参见Multiple-Named-Views）或简单嵌套视图的级别上添加命名视图标题吗？

如果是这样，您不应在 html 中为您的 ui-view 命名，并使用点语法定义子路由的名称以将您的层次结构推断为 $stateProvider，如下所示：

$stateProvider
  .state('home.header', {...})
于 2015-05-12T14:11:36.147 回答