AngularJS ui-路由器无法加载 templateUrl

Question

我有这样的项目结构：

index.html

<html>
  <head></head>
  <body ng-app="myApp">
      <div ui-view=""></div>
  </body>
</html>

bread.html

<div class="col-md-12">
This is the bread view.
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</div>

bread.js

'use strict';

angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
  .state('bread', {
    url: '/bread',
    views: {
      '@': {
        templateUrl: 'app/breadcrumbs/views/home.tpl.html',
      },
      'filters@bread': {
        templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
      },
    },
    controller: 'BreadCtrl'
  });
 });

作为模板加载的 html 文件非常简单。只包含段落标签。

我试过使用嵌套视图，但是在 ui-view="filters" 中我无法加载模板。

Answer 1

基本上你应该把你bread.html放在你状态的基础视图中，然后从视图中加载named-view，@代表这里的基础布局模板

.config(function ($stateProvider) {
$stateProvider
  .state('bread', {
    url: '/bread',
    views: {
      '@': {
        //I don't know the exact bread.html url, it can be different
        templateUrl: 'bread.html', //base layout which will make named-view available
      },
      'filters@bread': {
        templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
      },
      'tabledata@bread': {
        templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
      },
      'graph@bread': {
        templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
      },
    },
    controller: 'BreadCtrl'
  });
});

Answer 2

如果您想使用命名视图，您必须使用 ui-view 指令指定名称。或者只是将它作为 'clean' 没有值的指令：<div ui-view></div>

如果您想使用嵌套视图，您需要创建父视图和子视图。在这种情况下，您首先在 main ui-view 指令中加载父视图，然后在父视图中加载子视图。所以你的父视图也必须在里面包含 ui-view 指令。在这种情况下，您的状态应该是这样的：

.state("parent", { url: "/parentSegment", templateUrl: "path to parent view" }) .state("parent.child", { url: "/childSegment", templateUrl: "path to your child view" })

本例中的结果 url 将是 protocol://host/parentSegment/childSegment

您可以跳过 url 中的子片段，只需将 url 子参数留空即可：

.state("parent.child", { url: "/", templateUrl: "path to your child view" })

在这种情况下，您将有 protocol://host/parentSegment

如您所见，嵌套视图的名称中有 'prefix' 与父视图名称相同，名称的子部分附加有点 (.)

有关嵌套视图的信息，请参阅 this link, and for more info about named view you should visit this link

AngularJS ui-路由器无法加载 templateUrl

AngularJS ui-router unable to load templateUrl

angularjs

routing

angular-ui-router

single-page-application

angularjs-routing