日志
html模块化--标签的重用性
已有 792 次阅读2016-4-15 18:39
|个人分类:angular|
标签
<!-- navbar -->
<div data-ng-include=" 'tpl/blocks/header.html' " class="app-header navbar">
<!-- / navbar -->
<!-- menu -->
<div data-ng-include=" 'tpl/blocks/aside.html' " class="app-aside hidden-xs {{app.settings.asideColor}}">
<!-- / menu -->
<!-- content -->
<div class="app-content">
<div ui-butterbar>
<a href class="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside" ></a>
<div class="app-content-body fade-in-up" ui-view>
<!-- /content -->
uiModule 指令
.directive('uiModule', ['MODULE_CONFIG','uiLoad', '$compile', function(MODULE_CONFIG, uiLoad, $compile) {
return {
restrict: 'A',
compile: function (el, attrs) {
var contents = el.contents().clone();
return function(scope, el, attrs){
el.contents().remove();
uiLoad.load(MODULE_CONFIG[attrs.uiModule])
.then(function(){
$compile(contents)(scope, function(clonedElement, scope) {
el.append(clonedElement);
});
});
}
}
};
}])
$urlRouterProvider
.otherwise('/app/dashboard');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'tpl/app.html'
})
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'tpl/app_dashboard.html'
})
.state('app.ui', {
url: '/ui',
template: '<div ui-view class="fade-in-up">
'
})
.state('app.ui.buttons', {
url: '/buttons',
templateUrl: 'tpl/ui_buttons.html'
})
.state('app.ui.icons', {
url: '/icons',
templateUrl: 'tpl/ui_icons.html'
})
.state('app.ui.grid', {
url: '/grid',
templateUrl: 'tpl/ui_grid.html'
})
.state('app.ui.bootstrap', {
url: '/bootstrap',
templateUrl: 'tpl/ui_bootstrap.html'
})
/1 
