HTML脚本
<div style="height:48px;">
<div ng-controller="ReportNavCtrl" style="height:48px;width:100%;background-color:#F0F0F0;border-bottom:1px solid #E0E0E0;position:fixed;left:0;top:0;z-index:999999999;">
<table style="width:100%;height:100%;table-layout: fixed;">
<tr>
<td ng-click="goBack()" style="vertical-align:middle;width:70px;padding-right:5px;text-align:center;font-size:28px;color:#333333;">
<span class="fa fa-angle-left"></span>
</td>
<td ng-click="showPageListPanel()" style="vertical-align:middle;text-align:center;">
<div ng-bind-html="pageTitleHtml" style="font-size:16px;font-weight:bolder;height: 44px;line-height:44px;"></div>
<div style="height:10px;margin-top:-10px;text-align:center;display:none;" ng-style="{'display': reportPages.length > 1 ? 'block' : 'none'}">
<span ng-repeat="reportPage in reportPages" style="font-size:8px;color:#bbb;margin-right: 2px;">
<i class="fa fa-circle" ng-style="{'color': reportPage.key === currentReportPage.key ? '#0E58DE' : '#bbbbbb'}"></i>
</span>
</div>
</td>
<td ng-click="showSettingMenu()" style="vertical-align:middle;width:70px;text-align:center;font-size:20px;color:#333333;">
<i class="fa fa-gear"></i>
</td>
</tr>
</table>
</div>
</div>
JS脚本
myApp.controller('ReportNavCtrl', ['$scope', '$element', '$timeout', '$sce', function($scope, $element, $timeout, $sce) {
var pageTitleHtml = "<span>"+reportPage.name+"</span>";
$scope.pageTitleHtml = $sce.trustAsHtml(pageTitleHtml);
$scope.currentReportPage = reportPage;
$scope.reportPages = reportPages;
//点击导航栏返回按钮
$scope.goBack = function(){
VSEngine.reportService.goBack();
//也可以退出登录
//VSEngine.reportService.logout();
}
//点击导航栏设置按钮
$scope.showSettingMenu = function(){
VSEngine.reportService.showSettingMenu();
}
//显示页面列表
$scope.showPageListPanel = function(){
VSEngine.reportService.showPageListPanel();
}
}]);