标签: angularjs-include

Angular ui.router默认页眉

说到ui.router模块,我可以想到三种不同的方法来为每个视图设置默认的页眉和页脚:

DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
Run Code Online (Sandbox Code Playgroud)

1. ng-include - 将页眉/页脚附加到您的初始.html文件(index.html).

<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>
Run Code Online (Sandbox Code Playgroud)

1.1.将代码粘贴到index.html中

<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>
Run Code Online (Sandbox Code Playgroud)

2.使用指令解析页眉和页脚.

home.html的

<!-- content -->
<!-- /content -->
<footer></footer>
Run Code Online (Sandbox Code Playgroud)

footerDirective.js

module.directive('footer', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "footer.html",
        controller: ['$scope', '$filter', function ($scope, $filter) {
        }]
    } 
});
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-directive angular-ui-router angularjs-include

6
推荐指数
1
解决办法
4901
查看次数