16

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

使用Angular UI-Router (v0.0.2)，我设置了应用程序以在主“页面”/状态之间正确导航，同时继承基本状态。

索引.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% 空白页）。如果没有该参数，页面将正确呈现，但我没有搜索视图。

应用程序.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状态改变时视图会被重新初始化。我希望基本级别的视图能够通过状态更改持续存在。

4

4 回答 4

24

第一个明显的错误：

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

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

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

于 2013-09-05T08:44:13.727 回答
4

Child 状态应该是home.search而不是header.search. 在您的情况下，您可能想要编写一些abstract状态来保存布局，

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>

在 app.js 中

$stateProvider
    .state('base',{
        abstract:true,
        url:'/',
        templateUrl: viewBase+'base.html'
    })
    .state('base.main',{
        url:'',
        views:{
            "logo":{
                templateUrl:viewBase+'main/logo.html'
            },
            "menu":{
                templateUrl:viewBase+'main/menu.html'
            },
            "sidebar":{
                templateUrl:viewBase+'main/sidebar.html'
            },
            "entry":{
                templateUrl: viewBase+'main/entry.html'
            }
        }})
于 2013-08-28T05:02:18.510 回答
3

根据 ui-router文档，当应用程序处于特定状态时——当状态为“活动”时——它的所有祖先状态也隐式地处于活动状态。因此，例如，当“contacts.list”状态处于活动状态时，“contacts”状态也隐式处于活动状态，因为它是“contacts.list”的父状态。子状态会将其模板加载到其父级的 ui 视图中。我建议查看他们文档中标题为嵌套状态和视图的部分，以更全面地了解如何执行此操作。

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

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

意味着搜索模板的父状态应该是header为了正确加载视图。因此，我相信对 app.js 的以下更改将解决您的问题。

应用程序.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"
  });
于 2013-08-27T21:44:52.883 回答
2

这对我有用。

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

于 2013-08-29T07:15:18.460 回答