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

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

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

更新: @ actor2019的答案问题是search当状态改变时视图会重新初始化.我希望基层的观点能够在状态变化中持续存在.

Answer 1

第一个明显的错误:

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

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

.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的最大原因.