Javascript 角度UI路由器-处于继承状态的视图

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

使用（v0.0.2），我已经将应用程序设置为在主“页面”/“状态”之间正确导航，同时继承基本状态

Index.html:

<div ui-view></div>

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

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

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

$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"
  });

如何将视图添加到此父“基本”状态？

更新：

---

@actor2019的答案的问题是当状态改变时，

search

视图会重新初始化。我希望通过状态更改保持基本级别之外的视图。

根据ui路由器，当应用程序处于特定状态时，当一个状态为“活动”时，其所有祖先状态也隐式活动。例如，当“contacts.list”状态处于活动状态时，“contacts”状态也隐式处于活动状态，因为它是“contacts.list”的父状态。子州将其模板加载到其父州的ui视图中。我会再次查看他们标题为嵌套状态和视图的部分，以便更全面地了解如何做到这一点

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

home

，而

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

表示搜索模板的父状态应为

标题

，以便正确加载视图。因此，我相信对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"
  });

---

子状态应该是

home.search

，而不是

header.search

。在您的情况下，您可能需要编写一些

摘要

状态来保存布局

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>

这对我有用

$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'

第一个明显的错误： 使用视图时，不能在状态上指定控制器和模板。它们是相互排斥的

这是因为当状态上没有“视图”，只有控制器和模板时，UI路由器会自动创建“视图”属性并将这些属性拉到“空”视图中

相反，你应该：

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

第二个问题： 视图定位如何与嵌套视图等一起工作并不十分合乎逻辑，如果您一直将自己限制在一个视图中的一个视图中，它可能会很好地工作，但如果您开始使用多个命名视图，则会让人感到困惑。。。在顶部添加未命名的视图，许多人会迷路

视图在UI路由器中的工作方式是UI路由器最糟糕的部分

举个例子，我甚至不能完全确定如何从抽象的父状态将搜索视图作为目标。。。可能是：

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

如果它能成功的话。。。或者，您可以将搜索视图移出base.html，但我想您添加它是有原因的

---

整个视图概念是我最终写作的最大原因。

那么，“视图”中的任何内容都不能是父视图？它必须是层次结构分支的顶端？最后一个子级？您可以在视图中定义

ui视图

，比如在

main/logo.html

中，但是您必须使用

base.main

作为父级，然后从'base.main'派生ot，比如

.state（'base.main.NewChildState'）{视图：{NewSubView@base.main“：…}}

但是在这种情况下，视图（搜索）不会被继承。似乎应该有更合适的方法。从视图继承？我不明白你的意思，我认为这个想法是从一个州继承并覆盖父州的视图。我想从一个有视图的州继承。我希望继承状态中的视图在所有状态中都是持久的。我不应该对每个州都有不同的搜索视图。这都是相同的观点。我希望它与基本状态一起被继承。如果您希望“它在所有状态更改中保持不变”，为什么不在基本html中将其硬编码为普通html呢。顺便说一句，如果不在父状态下覆盖视图，它可能不会重新初始化。不确定。你可能想在视图的

oneter

中添加一些代码来检查它。这是一个选项，它没有我想要的那么干净。（+1）道尔顿博士的一个问题是

home。search

自动调用，因为它没有

url

，并将其

视图映射到处于活动状态的那些视图？如果我们在整个应用程序中有多个“
ui view=“search”
”，我们可以使用正常的
view@state
语法（假设它是真正的
home.other.state.search
，并且一个或多个状态之间有一个“
search
”视图）。。。？
.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })

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