自定义报表H5导航栏

<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 style="vertical-align:middle;width:70px;text-align:center;font-size:20px;color:#333333;">
                    <div style="float:right;" class="user-info all-easein-animation wait-for-page-ready" uib-dropdown dropdown-append-to-body>
            		<div style="display:none;" ng-style="{'display': showSettingBtn ? 'block' : 'none'}">
            			<div style="padding: 0 6px;" id="btn-append-to-body" type="button"  uib-dropdown-toggle><div style="float:left;max-width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"><i class="fa fa-gear"></i></div></div>
            			<ul class="uib-dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="btn-append-to-body" style="z-index:1001111110;">
            				<li role="menuitem"><a href="javascript:" ng-click="startAnnotate($event)"><i class="fa fa-user" style="margin-right:10px;"></i>批注</a></li>
            				<li class="divider"></li>
            				<li role="menuitem"><a href="javascript:" ng-click="refreshReport($event)"><i class="fa fa-refresh" style="margin-right:10px;"></i>刷新报表</a></li>
            			    <li class="divider" ng-show="shouldAuditReport"></li>
            				<li role="menuitem" ng-show="shouldAuditReport"><a href="javascript:" ng-click="auditReport($event)"><i class="fa fa-sign-out" style="margin-right:10px;"></i>报表审核</a></li>
            			</ul>
            		</div>
            	</div>
                </td>
            </tr>
        </table>
    </div>
</div>

//设置导航栏高度
pageRuntimeContext.pageContentPosTop = "48px";
//导航栏Controller
vsApp.controller('ReportNavCtrl', ['$scope', '$element', '$timeout', '$sce', '$http', 'toaster', function($scope, $element, $timeout, $sce, $http, toaster) {
    var pageTitleHtml = "<span>"+reportPage.name+"</span>";
    $scope.pageTitleHtml = $sce.trustAsHtml(pageTitleHtml);
    $scope.currentReportPage = reportPage;
    $scope.reportPages = reportPages;

    //点击导航栏返回按钮
    $scope.goBack = function(){
        VSEngine.reportService.goBack();
    }
    
    $scope.startAnnotate = function(){
        VSEngine.reportService.annotateOn();
    }
    
    $scope.refreshReport = function(){
        VSEngine.reportService.refreshReport();
    }
    
    $scope.auditReport = function(){
        var params = {
            reportId: reportId,
            type: "like"
        }

        if(!VSEngine.isWebDevice){
            var session = VSEngine.requestService.getSession();
            params.appId = session.appId;
            params.accessToken = session.accessToken;
        }

        var url = $scope.getPathPrefix()+"/mobile/v2/report/audit.do";
        $scope.postingData = true;

        VSUtils.post($http, url, params, function(response){
            $scope.postingData = false;
            if(response.data.success){
                toaster.success({body: "报表审核成功"});
                $scope.loadReportInfo();
            } else {
                toaster.error({body: response.data.message});
            }
        }, function(response){
            $scope.postingData = false;
            toaster.error({body: "网络连接失败，请重试"});
        });
    }
    
	//加载报表信息，检查[设置]菜单是否需要显示“报表审核”选项
    $scope.loadReportInfo = function(){
         var params = {
            reportId: reportId
        }
        if(!VSEngine.isWebDevice){
            var session = VSEngine.requestService.getSession();
            params.appId = session.appId;
            params.accessToken = session.accessToken;
        }
        var url = $scope.getPathPrefix()+"/mobile/v2/report.do";
        VSUtils.post($http, url, params, function(response){
            if(response.data.success){
                var report = response.data.data;
                $scope.shouldAuditReport = report.isReportAuditor && (report.auditDate == null || report.auditDate === "");
            } else {
                toaster.error({body: response.data.message});
            }
        }, function(response){
            console.log(response);
        });
    }

    //点击导航栏设置按钮
    $scope.showSettingMenu = function(){
        VSEngine.reportService.showSettingMenu();
    }

    //显示页面列表
    $scope.showPageListPanel = function(){
        VSEngine.reportService.showPageListPanel();
    }
    
	//页面加载完毕后再显示设置按钮
    $timeout(function(){
        $scope.showSettingBtn = true;
    });

}]);