Angular 1.3+ui路由器+生成器ng poly嵌入嵌套(?）视图不起作用

Angular 1.3 + ui-router + generator-ng-poly embedding nested(?) views not working

本文关键字：嵌套 不起作用 视图 poly ng 路由器 3+ui Angular      更新时间：2023-09-26

我是Angular、ui路由器和生成器ng-poly的新手，希望有人能帮助解决一个可能很简单的语法问题。

我正在为一个新项目使用生成器ng-poly，并使用ui路由器和HTML从"深层示例"中使用基于Angular 1.3的应用程序。

首先，我创建了一个"home"模块，然后在其中创建了"header"模块。所以…

 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中的"header"，我正在努力解决如何做到这一点。据我所知，

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

或

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

我应该如何引用"header"以使其正确显示在home.tpl.html中？

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

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

如果只注册一个状态，如contacts.list，则必须在某个时刻定义一个名为contacts的状态，否则将不注册任何状态状态contacts.list将被排队，直到定义了contacts为止。如果你这样做，你不会看到任何错误，所以要小心定义父项，以便子项正确注册。-嵌套状态

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

<div ui-view></div>

因此，要将应用程序设置为正确的状态，请使用$state.go()功能：例如

$state.go('home');

没有完全理解您的目标。是否要在主视图home的级别上添加命名视图标题（请参阅多个命名视图）还是简单的嵌套视图？

如果是这样的话，你不应该在html中给你的ui视图命名，并用点语法定义子路由的名称，以推断出$stateProvider的层次结构，如下所示：

$stateProvider
  .state('home.header', {...})
相关文章：