选项1：

Question

我的应用中有以下状态：

state('app', {
                url: '',
                abstract: true,
                templateUrl: 'app/shared/layouts/app.html',
                controller: 'appController'
            });

app.html布局包含以下视图：

<header id="topbar" ui-view="top"></header>
<section id="content" ui-view="content"></section>

“顶部”视图基本上是面包屑。但在某些功能中，它们更复杂，并且有很多按钮，标签等。

所以，在我的州，我有：

.state("dashboard", {
            parent: 'app',
            url: '/dashboard',
            views: {
                'top': { templateUrl: "app/dashboard/top.html" }
                'content': { templateUrl: "app/dashboard/dashboard.html" }
            },
            controller: 'Dashboard as vm',
            data: { requireAuth: true }
        });

有没有办法在所有状态下都有默认的顶级模板，只有在我想要的时候，才会覆盖这个模板？

我已经尝试将默认模板放入视图中：

<header id="topbar" ui-view="top">
   <ul class="breadcrumb">[...]</ul>
</header>

可以使用，但是在状态更改之间给出一个延迟（自定义顶部加载后的默认顶部消失）

Answer 1

选项1：

在索引（或父状态）中定义布局并以根状态定位命名视图

Plunk 1

的index.html：

  <body ng-app="plunker">
        <a ui-sref='app.child1'>Go to child1</a>
        <a ui-sref='app.child2'>Go to child</a>
        <h1>Hi from unnamed view in app state</h1>
        <div ui-view='header'></div>
        <div ui-view='content'></div>
  </body>

config：

  $stateProvider.state('app', {
    url: "",
    views: {
      "header@": {
        template: "<h3>Default header template</h3>"
      },
      "content@": {
        template: "<h5>Default content template</h3>"
      }
    }
  }).state('app.child1', {
    url: '/child1',
    views: {
      "header@": {
        template: "<small>Header for child1</small>"
      },
      "content@": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
      }
    }
  }).state('app.child2', {
    url: '/child2',
    views: {
      "header@": {
        template: "<small>Header for child2</small>"
      },
      "content@": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
      }
    }
  });

选项2

在app状态下定义布局，以及插入布局的默认视图

Plunk 2

index.html：

  <body ng-app="plunker">
    <div ui-view></div>
  </body>

配置：

 $stateProvider.state('app', {
    url: "",
    views: {
      "header@app": {
        template: "<h3>Default header template</h3>"
      },
      "content@app": {
        template: "<h5>Default content template</h3>"
      },
      "@": {
        template: "<a ui-sref='.child1'>Go to child1</a>" + 
        "<a ui-sref='.child2'>Go to child2</a>" +
        "<h1>Hi from unnamed view in app state</h1>" +
        "<div ui-view='header'></div>" + 
        "<div ui-view='content'></div>"
      }
    }
  }).state('app.child1', {
    url: '/child1',
    views: {
      "header@app": {
        template: "<small>Header for child1</small>"
      },
      "content@app": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
      }
    }
  }).state('app.child2', {
    url: '/child2',
    views: {
      "header@app": {
        template: "<small>Header for child2</small>"
      },
      "content@app": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child2</h1>"
      }
    }
  });

ui-router中的默认视图w / overwrite option

1 个答案:

选项1：

在索引（或父状态）中定义布局并以根状态定位命名视图

选项2

在app状态下定义布局，以及插入布局的默认视图