HTML脚本
<div style="height:48px;"> <div ng-controller="ReportNavCtrl" style="height:48px;width:100%;background-color:#Ff0000;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.logout(); } //点击导航栏设置按钮 $scope.showSettingMenu = function(){ VSEngine.reportService.showSettingMenu(); } //显示页面列表 $scope.showPageListPanel = function(){ VSEngine.reportService.showPageListPanel(); } }]);