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

Question

我刚开始迁移到 AngularJS，我已经遇到来自 angular-ui/ui-router 框架的 $stateProvider 的问题。这是我目前所拥有的：

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 但它只在页面上显示 parent 字符串。 child 字符串未显示。根据我的理解，这应该加载第一个模板，因为我们在 /#/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 而不是模板。假设您的应用程序具有模块化文件结构。

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

AngularJS $stateProvider loads parent but not child template

javascript

angularjs

angularjs-routing