本文介绍了角UI路由器:家长和放大器;子视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想建立具有下列结构标题视图,主视图,页脚视图站点。
所以我定义它包含了头和放根路线;页脚。根的孩子将是我所有的sites.Within这些网站我将有更多的嵌套视图。

在code下面它只报头,而不是在页脚&放大器;主视图。当我删除了父继承,这显示了主要的看法,但没有头和放大器;页脚。

HTML

 <机身NG-应用=应用程序>
    <头UI视图=头>< /头>
    <主UI的视图>< / UI的视图>
    <页脚UI视图=页脚>< /页脚>
< /身体GT;

JS

  module.config(函数($ urlRouterProvider,$ stateProvider){
      $ urlRouterProvider.otherwise('/家);
      $ stateProvider
        .STATE('根',{
          摘要:真实,
          观点:{
            '@':{
                控制器:'RootCtrl',
                controllerAs:rootCtrl
            },
            头@:{
                templateUrl:'模块/头/ header.html中',
                控制器:'HeaderCtrl',
                controllerAs:headerCtrl
            },
            页脚@:{
                templateUrl:'模块/页脚/ footer.html',
                控制器:'FooterCtrl',
                controllerAs:footerCtrl
                }
           }
        })
        .STATE('root.home',{
            父:'根',
            网址:'',
            templateUrl:'模块的/ home / home.html做为',
            控制器:HomeController中',
            controllerAs:homeCtrl
        });
    });


解决方案

有对的。

UI-路由器逻辑如何找到一个视图的目标/锚:总是试图插入孩子 。如果不能,那么使用绝对命名。见:

所以,我变了,就是父不愿透露姓名的观点正包含一个子目标/锚 - 未命名视图< UI画面/>

  .STATE('根',{
  摘要:真实,
  观点:{
    '@':{
        模板:'< UI画面/>',//新行,为孩子的目标
        控制器:'RootCtrl',
        controllerAs:rootCtrl
    },
    ....

另外,因为我们说,那默认的URL为

  $ urlRouterProvider.otherwise('/家);

我们必须有这样的状态:

  .STATE('root.home',{
    父:'根',
    网址:'/家',//这是其他方式,有一个启动的东西

检查一下

有另一种方法,可以为目标的根鉴于孩子:

  .STATE('root.home',{
    父:'根',
    网址:'/家,
    观点:{
      '@':{
      templateUrl:home.html做为',
      控制器:HomeController中',
      controllerAs:homeCtrl
      }
    },

在此情况下,父状态不要有< UI画面/> - 我们的目标根,但我们不会继承任何东西。 .. 这是为什么?请参阅此链接:

继承

I want to build a site with the following structure header-view, main-view, footer-view .So I defined a root route which contains the header & footer. Children of root will be all my sites.Within these sites I will have more nested views.

In the code below it does show the header, but not the footer & the main view. As soon as I remove the parent inheritance, it shows the main view but not the header & the footer.

HTML

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

JS

   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'
        });
    });
解决方案

There is a link to working plunker.

The UI-Router logic how to find a target/anchor for a view is: always try insert child into parent. If not possible, then use absolute naming. see:

View Names - Relative vs. Absolute Names

So what I changed, is, that the parent unnamed view is now containing a target/anchor for a child - unnamed view <ui-view />:

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

Also, because we say, that the default url is

  $urlRouterProvider.otherwise('/home');

we have to have such state:

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

Check it here

Another approach with a plunker here, could be to target the root view in the child:

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

In this case, the parent state does not have to have <ui-view /> - we target root, but we won't be inheriting anything... Why is that? See this link:

Scope Inheritance by View Hierarchy Only

这篇关于角UI路由器:家长和放大器;子视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 16:32