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 =＆＃34;过滤器＆＃34; 中，我无法加载模板。

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指令指定名称。或者只是将它作为“干净”指令放置而没有值：<div ui-view></div>

如果要使用嵌套视图，则需要创建父视图和子视图。在这种情况下，首先在父ui-view指令中加载父视图，然后在父视图中加载子视图。因此，您的父视图中还必须包含ui-view指令。在这种情况下，你的州应该是这样的：

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

在这种情况下，生成的网址将为protocol://host/parentSegment/childSegment

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

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

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

正如您所看到的，嵌套视图的名称中的'prefix'与父视图名称相同，并且name的子部分用点（。）附加到它上面。

有关嵌套视图的信息，请参阅this链接，有关命名视图的详情，请访问this链接

AngularJS ui-router无法加载templateUrl

2 个答案: