angularjs – Angular ui-router：父视图和子视图

发布时间：2020-12-17 07:57:23 所属栏目：安全来源：网络整理

导读：我想构建一个具有以下结构header-view,main-view,footer-view的站点. 所以我定义了一个根路由,其中??包含标题页脚. root的孩子将成为我的所有站点.在这些站点中,我将拥有更多嵌套视图. 在下面的代码中它确实显示了标题,但没有显示页脚和主要观点.一旦我删除

我想构建一个具有以下结构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'
        });
    });

有链接到 working plunker.

UI-Router逻辑如何为视图查找目标/锚点：始终尝试将子项插入父项.如果不可能,则使用绝对命名.看到：

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'
    },....

另外,因为我们说,默认网址是

$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',views: {
      '@': {
      templateUrl:'home.html',controllerAs:'homeCtrl'
      }
    },

在这种情况下,父状态不必具有< ui-view /> – 我们以root为目标,但我们不会继承任何东西……为什么？看到这个链接：

Scope Inheritance by View Hierarchy Only

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!