Angular ui.router默认页眉页脚
Angular ui.router default header footer
当谈到ui.router模块时,我可以想出三种不同的方法来为每个视图设置默认的页眉和页脚:
DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
1.ng-include-将页眉/页脚附加到初始.html文件(index.html)中
<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>
1.1.将代码粘贴到index.html
<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>
2.使用指令解析页眉和页脚
home.html
<!-- content -->
<!-- /content -->
<footer></footer>
footerDirective.js
module.directive('footer', function () {
return {
restrict: 'E',
replace: true,
templateUrl: "footer.html",
controller: ['$scope', '$filter', function ($scope, $filter) {
}]
}
});
http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/
3.在没有url的ui.router上创建一个额外的状态
然后,状态包装器将包含页眉和页脚,并且不可调用。
$stateProvider
.state('wrapper', {
templateUrl: 'wrapper.html', // contains html of header and footer
controller: 'WrapperCtrl'
})
.state('wrapper.home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
哪一个是首选?或者,对于Angular 1.x,有没有更可取的方法呢?
还有另一种方法可以利用状态的views
属性。它允许为某个状态定义多个命名视图。UI文档。
考虑以下示例,其中状态myapp有三个命名视图,其中内容视图将是具有动态内容的视图。
$stateProvider
.state('myapp', {
views: {
'header': {
template:'header <hr />',
controller:'mainController as main'
},
'content': {
template:'<div ui-view></div>'
},
'footer': {
template:'<hr /> footer',
controller:'mainController as main'
}
}
})
//States below will live in content view
.state('myapp.one', {
template:'View 1 <button ui-sref="myapp.two">next page</button>',
controller:'firstController as first',
})
.state('myapp.two', {
template:'Another page <button ui-sref="myapp.one"> Go back</button>',
controller:'secondController as second',
})
HTML将如下所示:
<div ui-view="header"></div>
<div ui-view="content"><!-- Where your content will live --></div>
<div ui-view="footer"></div>
Jsbin示例
相关文章:
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 如何设置默认<ui视图>在另一<ui视图>
- 删除默认的ui超链接行为
- AngularJS UI路由器未进入默认状态
- 使用 ui 路由器导航到非默认状态
- 在剑道UI中执行默认命令's网格触发事件
- 更改ng包含或定义默认ui视图
- 从日期选择器中获取默认格式的日期,并在jquery UI中转换为其他格式
- jQuery UI Accordion+Cookies-默认关闭
- 为什么不将 jQuery UI 日期选择器的默认值设置为匿名函数
- 如何声明,以便在 jquery 移动 UI 中突出显示默认选项卡
- 如何设置角度 UI 选择的默认值
- 剑道 UI 组合框 - 设置默认值
- Jquery UI DatePicker,获取默认日期的关联输入文本
- 如何将块UI与setTimeout一起使用,并在表单提交时防止默认
- 如何默认最小化 JQuery UI Portlet
- 使用默认选定的其他数据源时,从 ui-select 选项中删除重复项
- 默认情况下,Jquery UI 模式(弹出框)控件大小和隐藏
- 如何使用 ui-router 将子项或孙项状态设置为默认索引状态
- 更改默认滑块JQ UI