Question

编辑：根据@ actor2019的回答，我想更新我的问题，以便更好地解释问题：

使用Angular UI-Router（v0.0.2），我设置应用程序以在主要“页面”/状态之间正确导航，同时继承基本状态。

的index.html：

<div ui-view></div>

base.html文件：

<!-- Header -->
<div>
    <!-- Header markup -->

    <!-- Search View -->
    <div ui-view="search"></div>
</div>

<!-- Page Content view -->
<div ui-view></div>

问题出在app.js文件中。当我将views参数添加到base状态时，一切都停止工作（100％空白页）。如果没有该参数，页面会正确呈现，但我没有搜索视图。

app.js：

$urlRouterProvider.otherwise('/');

//
// Now set up the states
$stateProvider
  .state('base', {
    abstract: true,
    templateUrl: 'views/base.html',
    views: {
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })
  .state('base.home', {
    url: "/",
    templateUrl: "views/home.html"
  })
  .state('base.page2', {
    url: "/page2",
    templateUrl: "views/page2.html"
  });

如何向此父级“基础”状态添加视图？

enter image description here

更新 @ actor2019的回答here的问题在于，当状态发生变化时，search视图会重新初始化。我希望基层的观点能够在状态变化中持续存在。

Answer 1

第一个明显的错误：

在使用视图时，您无法在状态上指定控制器和模板。它们是相互排斥的......

这是因为当没有＆＃34;观看＆＃34;但是状态上的控制器和模板，UI-Router会自动创建＆＃34;视图＆＃34;属性并将这些属性拉到＆＃34;空＆＃34;视图...

.state('base', {
  abstract: true,
  templateUrl: 'views/base.html', //Can't do this
  views: { // when this is there.
    "search": {
      templateUrl: "views/search.html"
    }
  }
})

取而代之的是：

.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })

第二个问题：

视图定位如何与嵌套视图等一起使用并不是很合乎逻辑，如果您将自己限制在一个视图中的一个视图中，它可能会很好地工作，但是您开始使用多个命名视图时，这一切都会让人感到困惑...在顶部添加未命名的视图，许多人迷路了...

UI-Router中视图的工作方式是UI-Router最糟糕的部分......

举个例子，我甚至不完全确定从抽象父状态定位搜索视图的方法......可能会：

.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search@base": {
        templateUrl: "views/search.html"
      }
    }
  })

如果它甚至可以工作......或者你可以将搜索视图移出base.html，但我想你是因为某种原因将它添加到了那里。

整个观点概念是我最终编写https://github.com/dotJEM/angular-routing的最重要原因。

Answer 2

子状态应为home.search而不是header.search。在您的情况下，您可能希望编写一些abstract状态来保存布局，

<强> base.html文件

<div class="row-fluid">
    <div class="header">
        <div class="span3" ui-view="logo"></div>
        <div  class="span9" ui-view="menu"></div>
    </div>
</div>

<div class="row-fluid">
    <div class="content">
        <div class="span2" ui-view="sidebar"></div>
        <div  class="span10" ui-view="entry"></div>
    </div>
</div>

app.js中的

$stateProvider
    .state('base',{
        abstract:true,
        url:'/',
        templateUrl: viewBase+'base.html'
    })
    .state('base.main',{
        url:'',
        views:{
            "logo":{
                templateUrl:viewBase+'main/logo.html'
            },
            "menu":{
                templateUrl:viewBase+'main/menu.html'
            },
            "sidebar":{
                templateUrl:viewBase+'main/sidebar.html'
            },
            "entry":{
                templateUrl: viewBase+'main/entry.html'
            }
        }})

Answer 3

根据ui-router documentation，当应用程序处于特定状态时 - 当状态为“活动”时 - 它的所有祖先状态也是隐式活动的。因此，例如，当“contacts.list”状态处于活动状态时，“contacts”状态也是隐式激活的，因为它是“contacts.list”的父状态。子状态将其模板加载到其父级的ui视图中。我建议查看他们的documentation名为嵌套状态＆amp;的部分。观点以更全面地了解如何执行此操作。

在您提供给我们的代码中，搜索模板的父状态为home，而

.state('header.search', {
    templateUrl: "views/search.html",
    controller: "SearchCtrl"
})

意味着搜索模板的父状态应为header，以便正确加载视图。因此，我相信您的app.js的以下更改将解决您的问题。

app.js

$stateProvider
  .state('home', {
    url: "/",
    views: {
      '': {
        templateUrl: "views/mainContent.html",
        controller: "MainCtrl"
      },
      'header': {
        templateUrl: "views/header.html"
      },
      'footer': {
        templateUrl: "views/footer.html"
      },
    }
  })
  .state('home.search', {
    views: {
      'search': {
        templateUrl: "views/search.html",
        controller: "SearchCtrl"
      }
  })
  .state('anotherPage', {
    url: "/anotherPage",
    templateUrl: "views/anotherPage.html"
  });

Answer 4

这对我有用。

$stateProvider
    .state('base', {
      abstract: true,
      url:'/',
      templateUrl: 'views/base.html'
    })
    .state('base.home', {
      url: "",
      views: {
      "search@base": {
        templateUrl: "views/searchOfHome.html"
      }
      //content@base, contentOfHome.html
    }
    })
    .state('base.page2', {
      url: "page2",
      views: {
      "search@base": {
        templateUrl: "views/searchOfPage2.html"
      }
      //content@base, contentOfPage2.html
    });

如果'base'是根状态，则不需要'@base'

Angular UI Router - 处于继承状态的视图

4 个答案:

第一个明显的错误：

第二个问题：