Angular ui-router：父视图和子视图答案

【问题标题】：Angular ui-router : Parent & Child ViewsAngular ui-router：父视图和子视图
【发布时间】：2014-12-05 09:39:04
【问题描述】：

我想建立一个具有以下结构的站点 header-view, main-view, footer-view 。所以我定义了一个包含页眉和页脚的根路由。 root 的子节点将是我的所有站点。在这些站点中，我将有更多的嵌套视图。

在下面的代码中，它确实显示了页眉，但不显示页脚和主视图。一旦我删除父继承，它会显示主视图，但不显示页眉和页脚。

HTML

<body ng-app="App">
    <header ui-view="header"></header>
    <main ui-view></ui-view>
    <footer ui-view="footer"></footer>
</body>

   module.config(function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('root', {
          abstract: true,
          views: {
            '@': {
                controller: 'RootCtrl',
                controllerAs: 'rootCtrl'
            },
            'header@': {
                templateUrl: 'modules/header/header.html',
                controller: 'HeaderCtrl',
                controllerAs: 'headerCtrl'
            },
            'footer@': {
                templateUrl: 'modules/footer/footer.html',
                controller: 'FooterCtrl',
                controllerAs: 'footerCtrl'
                }
           }
        })
        .state('root.home',{
            parent:'root',
            url:'',
            templateUrl:'modules/home/home.html',
            controller: 'HomeController',
            controllerAs:'homeCtrl'
        });
    });

【问题讨论】：

你能创建原始的工作 jsfiddle/plunkr，所以我们可以玩。？乍一看，我会删除'abstract：true'和'parent：root'，因为它已经通过路径定义完成，接下来为页眉和页脚指定@root。无论如何样本更好
最后一句话没看懂。这是一个 plunkr：embed.plnkr.co/0U5vQxhrjlYPhkRPZ1mI/preview
不知道能不能链上stateprovider。我猜你必须在每个 .state 之前插入 $stateProvider 但这仍然没有改变任何东西。

标签： angularjs angular-ui-router

【解决方案1】：

有一个指向working plunker的链接。

UI-Router 为视图查找目标/锚点的逻辑是：始终尝试将child 插入parent。如果不可能，则使用绝对命名。见：

View Names - Relative vs. Absolute Names

所以我改变的是，父未命名视图现在包含子级的目标/锚点 - 未命名视图 <ui-view />：

.state('root', {
  abstract: true,
  views: {
    '@': {
        template: '<ui-view />', // NEW line, with a target for a child
        controller: 'RootCtrl',
        controllerAs: 'rootCtrl'
    },
    ....

另外，因为我们说，默认的 url 是

  $urlRouterProvider.otherwise('/home');

我们必须有这样的状态：

.state('root.home',{
    parent:'root',
    url:'/home', // this is the otherwise, to have something on a start up

查看here

plunker here 的另一种方法是定位子视图的根视图：

.state('root.home',{
    parent:'root',
    url:'/home',
    views: {
      '@': {
      templateUrl:'home.html',
      controller: 'HomeController',
      controllerAs:'homeCtrl'
      }
    },

在这种情况下，父状态不必有<ui-view /> - 我们以root 为目标，但我们不会继承任何东西......这是为什么呢？请参阅此链接：

Scope Inheritance by View Hierarchy Only

【讨论】：

科勒，我正在尝试使用stackoverflow.com/questions/37607364/…。如果你能帮助我:)
@cracker 你的问题似乎太抽象了。如果您可以创建一些 plunker（损坏的），我愿意提供帮助。但总的来说......如果你知道目标状态名称（“parent.child1.child”）和parmas {parentid：x，childid：y}......这应该不是问题......