zur*_*fyx 6 javascript angularjs angularjs-directive angular-ui-router angularjs-include
说到ui.router模块,我可以想到三种不同的方法来为每个视图设置默认的页眉和页脚:
DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
<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>
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/
然后,状态包装器将包含页眉和页脚,并且不可调用.
$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有更好的方法吗？
cba*_*ass 11
还有另一种方式可以利用该州的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>
| 归档时间： |
|
| 查看次数： |
4901 次 |
| 最近记录： |