角UI路由器 - 在继承的国家观 [英] Angular UI Router - Views in an Inherited State

问题描述

编辑：根据由@答案actor2019我想更新我的问题，以更好地说明问题：

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

使用角UI的路由器（v0.0.2），我设置的应用程序之间进行正常浏览主要的页面/状态，同时继承了基本状态。

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>

问题是在这里的app.js文件。当我添加了的意见参数设置为基状态，一切都停止工作（100％空白页）。如果没有这个参数，页面呈现正确，但我没有搜索视图。

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

如何添加视图来此父'基地'的状态？

更新：
这里 @ actor2019的回答的问题是，搜索视图获取当重新初始化状态的变化。我想离开基准面的意见，通过状态变化持续下去。

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...

这是因为当没有对国家意见，但一个控制器和模板，UI，路由器会自动创建该意见财产和拉这些属性来一个空的观点......

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

而不是做的：

.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...

意见的UI路由器的工作方式是UI的路由器的最糟糕的部分...

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

如果它甚至可以作出的工作......另外，您可以移动搜索视图出base.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.

整个视图的概念就是为什么我结束了写作的最大原因 https://github.com/dotJEM/angular-routing 代替。

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

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