我正在使用ui路由器状态。我有两个不同的 Controller ,将来可能还会扩展。如何编写默认和通用页眉和页脚。
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function($scope) {});
myApp.config(function($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/first");
// ui router states
$stateProvider
.state('first', {
url: "/first",
views: {
header: {
template: '<h1>First header</h1>',
controller: function($scope) {}
},
content: {
template: '<p>First content</>',
controller: function($scope) {}
},
footer: {
template: '<div>First footer</div>',
controller: function($scope) {}
}
}
})
.state('second', {
url: "/second",
views: {
header: {
template: '<h1>Second header</h1>',
controller: function($scope) {}
},
content: {
template: '<p>Second content</>',
controller: function($scope) {}
},
footer: {
template: '<div>Second footer</div>',
controller: function($scope) {}
}
}
});
});
Jsfiddle:http://jsfiddle.net/karthikreddy/b7cnszdf/
最佳答案
请看这个演示:http://jsfiddle.net/tkf954a5/
您可以像这样定义页脚和页眉:
var header = {
template: '<h1>Im Header</h1>',
controller: function($scope) {}
}
然后在您的州使用它:
.state('first', {
url: "/first",
views: {
header: header,
content: {
template: '<p>First content</>',
controller: function($scope) {}
},
footer: footer
}
})