AngularJS $ stateProvider加载父级但不是子级模板

Question

我刚刚开始迁移到AngularJS，并且我已经遇到从angular-ui/ui-router框架出现问题。这是我到目前为止有：

angular 
    .module('testApp', ['ui.router']) 
    .config(function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise("/index/home"); 

     $stateProvider 
      .state('index', { 
       abstract: true, 
       url: "/index", 
       template: "parent" 
      }) 
      .state('index.home', { 
       url: "/home", 
       template: "child" 
      }) 
    }) 
    .controller("MainController", function() { 
    }) 

现在，运行此脚本重定向我http://example.com/#/index/home但它只在页面上显示的父字符串。未显示子字符串。根据我的理解，这应该加载第一个模板，因为我们位于/#/index域部分，然后是第二个模板，因为我们位于嵌套页面/#/index/home。

有人可以帮助我解释为什么这不按预期工作？

Answer 1

在您父母的模板中，为了呈现子状态，您需要另一个<div ui-view></div>。

如果您想要多个嵌套视图，则可以在父模板中包含多个ui-view。你只需要命名它们。例如，

父模板：

<h1>parent</h1> 
<div ui-view="child1"></div> 
<div ui-view="child2"></div> 

你定义子状态如下：

$stateProvider 
     .state('index', { 
      abstract: true, 
      url: "/index", 
      template: "parent" 
     }) 
     .state('index.home', { 
      url: "/home", 
      views: { 
      'child1': { 
       templateURL: "child1.html" 
       } 
      } 
     }) 
     .state('index.home2', { 
      url: '/home2', 
      views: { 
      'child2': { 
      templateURL: 'child2.html' 
      } 
      } 
     }) 

*注意我用的，而不是模板templateURL。假设你的应用程序具有模块化文件结构。