如何使用angular ui router v0.2.5在单独的视图中具有全局页脚(允许模块)

Question

如果这篇文章的标题令人困惑，我很抱歉。

我正在将我购买的一个模板转换为angular.js应用程序。

我想使用不同的模块来组织应用程序。

我还使用了0.2.5版本的angular ui路由器，它允许使用单独的模块进行路由。

一切都很好，除了我使用的模板看起来像这样：

<div>Global Nav Bar</div>
<div>Content that changes with different states right below Nav Bar</div>
<div class="wrapsContentAndPushesToBottom">
  <div>Content that changes with different states at 
       bottom of page thanks to parent div's class</div>
  <div>Global Footer also on bottom of page due 
       to parent div's class</div>
</div>

我很难让全局页脚工作，因为父包装div。

有人能帮我把它用起来吗？

更新：

我无法得到建议，包括使用我的plunkr示例：http://plnkr.co/edit/dgNkHX

我也不能使用页脚的命名视图：http://plnkr.co/edit/BO8NDO

Answer 1

我认为您正在寻找ng include。http://docs.angularjs.org/api/ng.directive:ngInclude

这将使您能够将全局页脚提取到一个单独的文件中，并将其包含在模板中。

<div ng-include src="'globalFooter.tpl.html'"></div>

Answer 2

试试这样的东西：

.state('root', {
  abstract: true,
  views: {
    '@': {
    },
    'sideBar@': { templateUrl: 'views/sidebar.html', controller: 'SideBarCtrl' },
    'header@': { templateUrl: 'views/header.html' },
    'footer@': { templateUrl: 'views/footer.html' }
  }
})
.state('main', {
  url: '/',
  parent: 'root',
  views: {
    '@': { templateUrl: 'views/main_content.html', controller: 'MainCtrl' }
  }
})

这对我有用。我有一个全局页脚。