Question

我在使用Angular和Laravel时，我<div ng-include src="'js/app/partials/layout/header.html'"></div>文件正在我的<div ui-view>上方index.blade.php。

我已经查看了ui.router中的父状态继承，但它似乎不起作用，并且感觉很复杂/或者对于布局来说可能有点过分。我只想注入页眉和页脚。

这是我在尝试使用ui.router状态创建布局注入系统之前所做的。如下所示。

<div ui-view="header"></div>
<div ui-view></div>

.state('root', {
    url: '/',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'js/app/partials/header.html'
        }
    },
    data: {
        requireLogin: false
    }
})
.state('root.login', {
    url: '/login',
    templateUrl: 'js/app/partials/login.html',
    controller: 'LoginCtrl',
    data: {
        requireLogin: false
    }
})

Answer 1

您需要更改html的结构，方法是命名为views＆amp;这些将通过templateUrl＆amp;来自州controller选项的views。

您的home.html内部基本上有三个命名视图，例如header，content＆amp; footer，根状态正在设置header＆amp;带有控制器的footer个模板。然后，您的子状态登录将使用此content@root中的@root使用绝对状态名称来设置内容视图，因为content命名视图已加载到root状态。

<强>标记

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

<强>代码

myApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/login');
  $stateProvider
    .state('root', {
      abstract: true,
      url: '/',
      //templateUrl: 'js/app/partials/home.html',//remove this
      views: {
        '': {
          templateUrl: 'js/app/partials/home.html' //add it here
        },
        'header': {
          templateUrl: 'js/app/partials/header.html'
        },
        'footer': {
          templateUrl: 'js/app/partials/header.html'
        }
      },
      data: {
        requireLogin: false
      }
    })

  .state('root.login', {
    url: 'login',
    views: {
      'content@root': {
        templateUrl: 'js/app/partials/login.html',
        controller: 'LoginCtrl',
      },
    },
    data: {
      requireLogin: false
    }
  })
});

Working Plunkr

Answer 2

我认为你使用它。

`.state('header', {
   abstract : true,
   templateUrl: 'js/app/partials/header.html'

})
.state('home', {
            url: '/',
            templateUrl: 'js/app/partials/home.html',
            parent : 'header',
            data: {
                requireLogin: false
            }
        })
        .state('login', {
            url: '/login',
            parent : 'header',
            templateUrl: 'js/app/partials/login.html',
            controller: 'LoginCtrl',
            data: {
                requireLogin: false
            }
        })`

有没有更好的方法来使用ui.router构建布局？

2 个答案: