javascript - Angular UI Router - 继承状态下的 View

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% 空白页)。如果没有该参数，页面会正确呈现，但我没有搜索 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"
  });

我如何将 View 添加到这个父“基础”状态？

更新: @actor2019 的回答问题here是 search View 在状态更改时重新初始化。我希望离开基本级别的 View 在状态更改时持续存在。

Answer 1

第一个明显的错误:

您不能在使用 View 时在状态上指定 Controller 和模板。它们是互斥的...

这是因为当状态上没有“ View ”但有 Controller 和模板时，UI-Router 会自动创建“ View ”属性并将这些属性拉到“空” 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"
      }
    }
  })

第二个问题:

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

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

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

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

如果它甚至可以工作...或者您可以将搜索 View 移出 base.html，但我想您将其添加到那里是有原因的。

整体 View 概念是我最终写下 https://github.com/dotJEM/angular-routing 的最大原因相反。