Angular UI 路由器 - 处于继承状态的视图 [英] Angular UI Router - Views in an Inherited State

问题描述

根据@actor2019 的回答，我想更新我的问题以更好地解释问题:

使用 的问题在于，当状态改变时，search 视图会重新初始化.我希望基础级别的视图能够在状态更改时保持不变.

解决方案

第一个明显错误:

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

这是因为当状态上没有视图"但有控制器和模板时，UI-Router 会自动创建视图"属性并将这些属性拉到空"视图中...

.state('base', {摘要:真实，templateUrl: 'views/base.html',//不能这样做视图:{//当它存在时.搜索": {templateUrl: "views/search.html"}}})

改为:

.state('base', {摘要:真实，意见:{":{templateUrl: 'views/base.html'},搜索": {templateUrl: "views/search.html"}}})

第二个问题:

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

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

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

.state('base', {摘要:真实，意见:{":{templateUrl: 'views/base.html'},搜索@基地":{templateUrl: "views/search.html"}}})

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

整个视图概念是我最终编写https://github.com/dotJEM/angular-routing<的最大原因/a> 代替.

edit: Based on the answer by @actor2019 I want to update my question to better explain the problem:

Using Angular UI-Router(v0.0.2), I've setup the app to properly navigate between main "pages"/state, while inheriting the base state.

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>

The issue is here in the app.js file. When I add the views parameter to the base state, everything stops working(100% blank page). Without that parameter, the page renders correctly, but I have no search view.

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

How do I add views to this parent 'base' state?

UPDATE: The problem with @actor2019's answer here is that the search view gets reinitialized when the state changes. I'd like the views off the base level to persist through state changes.

解决方案

The first obvious mistake:

You can't specify controller and template on the state while your using views. They are mutually exclusive...

This is because when there is no "views" but a controller and template on the state, UI-Router automatically creates the "views" property and pulls those properties to an "empty" view...

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

Instead do:

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

Second problem:

How views targeting works with nested views etc. is not very logical, it may work well if you restrict your self to one view in one view all the way down, but ones you start working with multiple named views it all gets confusing... Add unnamed views on top and many people gets lost...

The way views work in UI-Router is the worst part of UI-Router...

Given you example I am not even entirely sure of the way to target the search view from your abstract parent state... Might be:

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

If it can even be made to work... Alternatively you can move the search view out of base.html, but I guess you added it in there for a reason.

The whole view concept is the biggest reason why I ended up writing https://github.com/dotJEM/angular-routing instead.

这篇关于Angular UI 路由器 - 处于继承状态的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！