Phonegap Cordova Statusbar 插件创建双条
Phonegap Cordova Statusbar Plugin creating double bars
我正在使用 phonegap 开发应用程序。通过 CLI 构建，而不是 phonegap 构建。我在使用 cordova-plugin-statusbar 插件时遇到问题。它会在打开时增加一个额外的条形高度。这是它的样子。
双倍高度菜单栏：
我用两种方式实现了状态栏。首先将标签添加到 config.xml
<platform name="ios">
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<preference name="StatusBarBackgroundColor" value="#000000" />
</platform>
我也用 javascript 完成了此操作（首先删除配置标签）并将以下内容添加到我的 DeviceReady 函数
StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#000000');
StatusBar.styleDefault();
为了看看发生了什么，我改变了颜色，我得到了这个
双状态栏2种颜色：
同样，当我删除所有内容或将 overlaysWebView 设置为 'true' 时，我没有间距，我的内容位于菜单栏下方。
StatusBar.overlaysWebView( true );
这让我相信我没有 CSS 问题。另外，我浏览了我的 css 并没有看到任何可以添加这个的东西。到目前为止，我的 css 非常基础。
/* Style Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of style reset */
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
/* background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;*/
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
/* height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;*/
background-color: #333333;
}
.md-button {
color:#DFE5E6;
background-color:#1D1D1D;
}
.md-button[disabled] {
border: 1px solid black;
color : rgba(0, 0, 0, 0.26);
background-color: transparent;
}
/* Portrait layout (default) */
.app {
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
position:absolute; /* position in the center of the screen */
left:50%;
top:50%;
height:50px; /* text area height */
width:225px; /* text area width */
text-align:center;
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
/* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
/* offset horizontal: half of image width and text area width */
}
}
/* Custom Fonts */
@font-face {
font-family: "sapient_sans_regular";
src: url("../fonts/sapient_sans_regular.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_regular_italic";
src: url("../fonts/sapient_sans_regular_italic.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_bold";
src: url("../fonts/sapient_sans_bold.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_bold_italic";
src: url("../fonts/sapient_sans_bold_italic.TTF") format("opentype");
}
.material-icons {
margin:0px;
color:white;
height:40px;
width:40px;
line-height:40px;
vertical-align: middle;
text-align: center;
background: #1D1D1D;
}
.material-icons.md-menu-item.md-icon {
text-align: left;
}
.material-icons.menuItem {
background: transparent;
color:#DFE5E6;
}
#menuBar ul {
position:fixed;
top:0;
width:100%;
list-style-type: none;
background-color: #1D1D1D;
}
#menuBar li {
text-align:center;
display: inline;
}
.logo {
line-height:11px;
padding:13px 2px;
display: inline-block;
vertical-align: middle;
//float:left;
//margin: auto;
overflow: auto;
width:100%;
background-color: #1D1D1D;
border-bottom: 1px solid white;
}
.my {
//line-height:40px;
text-transform: capitalize;
font-family: "sapient_sans_bold";
//display: inline-block;
font-size:20px;
color: #DFE5E6;
}
.company {
//line-height:40px;
text-transform: capitalize;
font-family: "sapient_sans_bold";
font-size:20px;
color: #6D6E70;
}
#menuListing ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f1f1f1;
}
#menuListing li a {
font-family:'sapient_sans_regular';
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
#menuListing li a:hover {
background-color: #555;
color: white;
}
.content {
color: white;
padding:10px;
}
h1 {
font-size:18px;
font-weight:normal;
//margin:0px;
//overflow:visible;
//padding:0px;
//text-align:center;
}
.hidden {
display: none;
}
#map
{
//margin: auto;
//width: 100%;
border: 3px solid green;
padding: 100px;
//height: 90%;
//width: 60%;
}
我已经尝试卸载并重新安装插件和 ios 平台，但问题没有改变。
我已经在多个 IOS 模拟器（不同的手机）上测试过，结果都一样，我还没有直接在设备上测试过，但我怀疑它会有所不同。
我注意到 android 也有一个状态栏缓冲区（尽管它不应该），但它只是一个白色的栏。我认为这会建议 CSS，但是当我 运行
时我在浏览器中看不到这个
phonegap serve
快速更新：我正在暂停状态栏并努力让我的 google 地图插件也能正常工作，我做了一些更改，状态栏现在似乎可以正常工作了。一定有某种互动。去看看我是否能弄清楚到底是什么。
一些HTML供参考
Index.html
<!DOCTYPE html>
<html ng-app="snApp">
<head>
<title>My Test App</title>
</head>
<!-- Actual Content -->
<body ng-cloak>
<div ng-include="'app/menuBar/menuBar.html'"></div>
<!-- Main content Area -->
<md-content flex id="main">
<ng-view></ng-view>
</md-content>
</body>
</html>
MenuBar.html（请注意，我已根据此原始帖子进行了一些调整。我已尝试还原它们。）
<div ng-controller="menuBarController as menuBarController" id="menuBarContainer">
<md-toolbar id="menuBar" class="md-short" layout="row">
<div class="menuButton">
<md-icon ng-click="menuBarController.toggleLeftMenu();" md-font-library="material-icons">menu</md-icon>
</div>
<div class="logo">
<span class="my">My</span><!-- this removes the space (for some reason) --><span class="app">App</span>
</div>
</md-toolbar>
<md-sidenav md-component-id="left" class="md-sidenav-left" >
<md-menu-item>
</md-menu-item> <!-- remove this after adding in the buffer -->
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/">
<md-icon md-font-library="material-icons" class="menuItem">home
</md-icon> Home
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/locations">
<md-icon md-font-library="material-icons" class="menuItem">location_city
</md-icon>Locations
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/map">
<md-icon md-font-library="material-icons" class="menuItem">map
</md-icon>Map
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/navigate">
<md-icon md-font-library="material-icons" class="menuItem">navigation
</md-icon>Navigate
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/about">
<md-icon md-font-library="material-icons" class="menuItem">info
</md-icon>About
</md-button>
</md-menu-item>
</md-sidenav>
</div>
菜单栏控制器
console.log("menuBar.controller.js file loaded");
snApp.controller('menuBarController', ['$mdSidenav', '$window', MenuBarController]);
function MenuBarController($mdSidenav, $window) {
var vm = this;
// vm.operatingSystem = $window.operatingSystem;
vm.operatingSystem = null;
vm.toggleLeftMenu = toggleLeftMenu;
vm.checkForIos = checkForIos;
function toggleLeftMenu() {
$mdSidenav('left').toggle();
}
}
查看示例 - Home.html 页面现在非常简单用于测试：
<!-- home.html -->
<div class="content" ng-controller="HomeController as home">
<h1>Home Page</h1>
<p>{{ home.message }}</p>
</div>
home.controller.js
console.log("home.controller.js file loaded");
angular.module('snApp')
.controller("HomeController", HomeController);
function HomeController() {
//debugger;
var vm = this;
vm.message = "this is a home message";
}
map.html - 这是地图视图 - 现在有很多内容只是为了测试。
<!-- map.html -->
<div class="content" ng-controller="MapController as map">
<h1>Map Page</h1>
<md-content layout-gt-sm="row" layout-padding>
<md-button ng-click="map.setMapToDiv();">show map</md-button>
<md-button ng-click="map.getLocation();" ng-disabled="map.buttonDisabled">{{ map.buttonText }}</md-button>
<md-input-container>
<label>Div Adjustent</label>
<input ng-model="map.divAdjustment">
</md-input-container>
<md-button ng-click="map.adjustDiv();" > Adjust Div Height </md-button>
<p></p>
<p>For testing - buttonEnabled value: <span ng-bind="map.buttonDisabled"></span></p>
<p>{{ map.latitude }}</p>
<p>{{ map.longitude }}</p>
<p>{{ map.message }}</p>
<p></p>
<md-button ng-click="map.showMapDialog();">make map full screen</md-button>
<!-- <div id="map" ng-show="map.locationUpdated"> -->
<div id="map" ng-show="true"></div>
</md-content>
</div>
map.controller.js
console.log("map.controller.js file loaded");
angular.module('snApp')
.controller("MapController", ['$scope', MapController]);
function MapController($scope) {
// Variables
var vm = this;
vm.latitude = 0;
vm.longitude = 0;
vm.locationUpdated = false;
vm.buttonTextDefault = "Get Location";
vm.buttonText = vm.buttonTextDefault;
vm.buttonDisabled = false;
vm.divAdjustment = 0;
vm.message = "Map will display after getting Geolocation";
// Method Declarations
vm.getLocation = getLocation;
vm.setMapToDiv = setMapToDiv;
vm.showMapDialog = showMapDialog;
// vm.adjustDiv = adjustDiv;
// Gets the Current Geolocation for user
function getLocation() {
vm.buttonDisabled = true;
vm.buttonText = "Working...";
var options = { maximumAge: 0, timeout: 10000, enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,options);
vm.buttonDisabled = false;
}
function getLocationSuccess(position) {
console.log("found geolocation");
vm.latitude = position.coords.latitude;
vm.longitude = position.coords.longitude;
vm.buttonText = vm.buttonTextDefault;
googleMaps.positionMapToCoords(vm.latitude, vm.longitude);
vm.locationUpdated = true;
$scope.$apply();
}
function getLocationError(error) {
console.log("Error finding geolocation");
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
vm.buttonText = vm.buttonTextDefault;
$scope.$apply();
}
function setMapToDiv() {
googleMaps.setMapToDiv();
}
function showMapDialog() {
googleMaps.showMapDialog();
}
}
如果有人碰到这个，遇到同样的问题。我基本上找到了一个更像是解决方法而不是直接答案的解决方案，但可能会有所帮助。我决定仍然使用该插件来正确地为文本着色，但其余的我手动管理。
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString('#1D1D1D');
StatusBar.styleLightContent();
然后一些CSS
#statusBar {
background-color:#1D1D1D;
width:100%;
min-width:100%;
overflow: auto;
min-height:20px;
height:20px;
}
我将此 div 作为菜单栏的一部分。菜单栏是它自己的 angular 组件。在控制器中，我有一个检查 OS 版本的方法。感谢这个post：Detecting iOS / Android Operating system
snApp.controller('menuBarController', ['$mdSidenav', '$window', '$googleMapsService', MenuBarController]);
function MenuBarController($mdSidenav, $window, $googleMapsService) {
var vm = this;
var leftMenuId = 'left';
vm.isIosValue = false;
vm.$onInit = function() {
vm.isIosValue = vm.checkForIos();
}
vm.operatingSystem = null;
vm.toggleLeftMenu = toggleLeftMenu;
vm.getMobileOperatingSystem = getMobileOperatingSystem;
vm.checkForIos = checkForIos;
vm.isIos = isIos;
vm.googleMaps = $googleMapsService;
function toggleLeftMenu() {
mapDivManagement();
$mdSidenav(leftMenuId).onClose(mapDivManagement).toggle();
}
function mapDivManagement() {
if(vm.googleMaps.checkMap() && $window.location.hash == "#/map")
{
if($mdSidenav(leftMenuId).isOpen()) {
console.log("vm.googleMaps.revealMap(true);");
vm.googleMaps.revealMap(true);
}
else {
console.log("vm.googleMaps.revealMap(false);");
vm.googleMaps.revealMap(false);
}
}
}
/**
* Determine the mobile operating system.
* This function sets global variable to one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*
* Source:
*/
function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
//debugger;
// Windows Phone must come first because its UA also contains "Android"
if (/windows phone/i.test(userAgent)) {
// return "Windows Phone";
vm.operatingSystem = "Windows Phone";
}
else if (/android/i.test(userAgent)) {
// return "Android";
vm.operatingSystem = "Android";
}
// iOS detection from:
else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
// return "iOS";
vm.operatingSystem = "iOS";
}
else {
vm.operatingSystem = "unknown";
}
// return "unknown";
}
function checkForIos() {
vm.getMobileOperatingSystem();
//vm.operatingSystem = $window.operatingSystem;
if(vm.operatingSystem == 'iOS') {
return true;
}
else {
return false;
}
}
function isIos() {
return vm.isIosValue;
}
}
最后，在我的 menubar.html 文件中，我有这个 div:
<!-- Status Bar -->
<div ng-show="menuBarController.isIos()" id="statusBar"></div>
这将根据 OS 显示或隐藏 div。
不确定这将如何在通话中发挥作用，但它会让你走得更远。
我正在使用 phonegap 开发应用程序。通过 CLI 构建，而不是 phonegap 构建。我在使用 cordova-plugin-statusbar 插件时遇到问题。它会在打开时增加一个额外的条形高度。这是它的样子。
双倍高度菜单栏：
我用两种方式实现了状态栏。首先将标签添加到 config.xml
<platform name="ios">
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<preference name="StatusBarBackgroundColor" value="#000000" />
</platform>
我也用 javascript 完成了此操作（首先删除配置标签）并将以下内容添加到我的 DeviceReady 函数
StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#000000');
StatusBar.styleDefault();
为了看看发生了什么，我改变了颜色，我得到了这个
双状态栏2种颜色：
同样，当我删除所有内容或将 overlaysWebView 设置为 'true' 时，我没有间距，我的内容位于菜单栏下方。
StatusBar.overlaysWebView( true );
这让我相信我没有 CSS 问题。另外，我浏览了我的 css 并没有看到任何可以添加这个的东西。到目前为止，我的 css 非常基础。
/* Style Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of style reset */
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
/* background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;*/
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
/* height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;*/
background-color: #333333;
}
.md-button {
color:#DFE5E6;
background-color:#1D1D1D;
}
.md-button[disabled] {
border: 1px solid black;
color : rgba(0, 0, 0, 0.26);
background-color: transparent;
}
/* Portrait layout (default) */
.app {
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
position:absolute; /* position in the center of the screen */
left:50%;
top:50%;
height:50px; /* text area height */
width:225px; /* text area width */
text-align:center;
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
/* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
/* offset horizontal: half of image width and text area width */
}
}
/* Custom Fonts */
@font-face {
font-family: "sapient_sans_regular";
src: url("../fonts/sapient_sans_regular.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_regular_italic";
src: url("../fonts/sapient_sans_regular_italic.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_bold";
src: url("../fonts/sapient_sans_bold.TTF") format("opentype");
}
@font-face {
font-family: "sapient_sans_bold_italic";
src: url("../fonts/sapient_sans_bold_italic.TTF") format("opentype");
}
.material-icons {
margin:0px;
color:white;
height:40px;
width:40px;
line-height:40px;
vertical-align: middle;
text-align: center;
background: #1D1D1D;
}
.material-icons.md-menu-item.md-icon {
text-align: left;
}
.material-icons.menuItem {
background: transparent;
color:#DFE5E6;
}
#menuBar ul {
position:fixed;
top:0;
width:100%;
list-style-type: none;
background-color: #1D1D1D;
}
#menuBar li {
text-align:center;
display: inline;
}
.logo {
line-height:11px;
padding:13px 2px;
display: inline-block;
vertical-align: middle;
//float:left;
//margin: auto;
overflow: auto;
width:100%;
background-color: #1D1D1D;
border-bottom: 1px solid white;
}
.my {
//line-height:40px;
text-transform: capitalize;
font-family: "sapient_sans_bold";
//display: inline-block;
font-size:20px;
color: #DFE5E6;
}
.company {
//line-height:40px;
text-transform: capitalize;
font-family: "sapient_sans_bold";
font-size:20px;
color: #6D6E70;
}
#menuListing ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f1f1f1;
}
#menuListing li a {
font-family:'sapient_sans_regular';
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
#menuListing li a:hover {
background-color: #555;
color: white;
}
.content {
color: white;
padding:10px;
}
h1 {
font-size:18px;
font-weight:normal;
//margin:0px;
//overflow:visible;
//padding:0px;
//text-align:center;
}
.hidden {
display: none;
}
#map
{
//margin: auto;
//width: 100%;
border: 3px solid green;
padding: 100px;
//height: 90%;
//width: 60%;
}
我已经尝试卸载并重新安装插件和 ios 平台，但问题没有改变。
我已经在多个 IOS 模拟器（不同的手机）上测试过，结果都一样，我还没有直接在设备上测试过，但我怀疑它会有所不同。
我注意到 android 也有一个状态栏缓冲区（尽管它不应该），但它只是一个白色的栏。我认为这会建议 CSS，但是当我 运行
时我在浏览器中看不到这个phonegap serve
快速更新：我正在暂停状态栏并努力让我的 google 地图插件也能正常工作，我做了一些更改，状态栏现在似乎可以正常工作了。一定有某种互动。去看看我是否能弄清楚到底是什么。
一些HTML供参考 Index.html
<!DOCTYPE html>
<html ng-app="snApp">
<head>
<title>My Test App</title>
</head>
<!-- Actual Content -->
<body ng-cloak>
<div ng-include="'app/menuBar/menuBar.html'"></div>
<!-- Main content Area -->
<md-content flex id="main">
<ng-view></ng-view>
</md-content>
</body>
</html>
MenuBar.html（请注意，我已根据此原始帖子进行了一些调整。我已尝试还原它们。）
<div ng-controller="menuBarController as menuBarController" id="menuBarContainer">
<md-toolbar id="menuBar" class="md-short" layout="row">
<div class="menuButton">
<md-icon ng-click="menuBarController.toggleLeftMenu();" md-font-library="material-icons">menu</md-icon>
</div>
<div class="logo">
<span class="my">My</span><!-- this removes the space (for some reason) --><span class="app">App</span>
</div>
</md-toolbar>
<md-sidenav md-component-id="left" class="md-sidenav-left" >
<md-menu-item>
</md-menu-item> <!-- remove this after adding in the buffer -->
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/">
<md-icon md-font-library="material-icons" class="menuItem">home
</md-icon> Home
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/locations">
<md-icon md-font-library="material-icons" class="menuItem">location_city
</md-icon>Locations
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/map">
<md-icon md-font-library="material-icons" class="menuItem">map
</md-icon>Map
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/navigate">
<md-icon md-font-library="material-icons" class="menuItem">navigation
</md-icon>Navigate
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="menuBarController.toggleLeftMenu();" ng-href="#/about">
<md-icon md-font-library="material-icons" class="menuItem">info
</md-icon>About
</md-button>
</md-menu-item>
</md-sidenav>
</div>
菜单栏控制器
console.log("menuBar.controller.js file loaded");
snApp.controller('menuBarController', ['$mdSidenav', '$window', MenuBarController]);
function MenuBarController($mdSidenav, $window) {
var vm = this;
// vm.operatingSystem = $window.operatingSystem;
vm.operatingSystem = null;
vm.toggleLeftMenu = toggleLeftMenu;
vm.checkForIos = checkForIos;
function toggleLeftMenu() {
$mdSidenav('left').toggle();
}
}
查看示例 - Home.html 页面现在非常简单用于测试：
<!-- home.html -->
<div class="content" ng-controller="HomeController as home">
<h1>Home Page</h1>
<p>{{ home.message }}</p>
</div>
home.controller.js
console.log("home.controller.js file loaded");
angular.module('snApp')
.controller("HomeController", HomeController);
function HomeController() {
//debugger;
var vm = this;
vm.message = "this is a home message";
}
map.html - 这是地图视图 - 现在有很多内容只是为了测试。
<!-- map.html -->
<div class="content" ng-controller="MapController as map">
<h1>Map Page</h1>
<md-content layout-gt-sm="row" layout-padding>
<md-button ng-click="map.setMapToDiv();">show map</md-button>
<md-button ng-click="map.getLocation();" ng-disabled="map.buttonDisabled">{{ map.buttonText }}</md-button>
<md-input-container>
<label>Div Adjustent</label>
<input ng-model="map.divAdjustment">
</md-input-container>
<md-button ng-click="map.adjustDiv();" > Adjust Div Height </md-button>
<p></p>
<p>For testing - buttonEnabled value: <span ng-bind="map.buttonDisabled"></span></p>
<p>{{ map.latitude }}</p>
<p>{{ map.longitude }}</p>
<p>{{ map.message }}</p>
<p></p>
<md-button ng-click="map.showMapDialog();">make map full screen</md-button>
<!-- <div id="map" ng-show="map.locationUpdated"> -->
<div id="map" ng-show="true"></div>
</md-content>
</div>
map.controller.js
console.log("map.controller.js file loaded");
angular.module('snApp')
.controller("MapController", ['$scope', MapController]);
function MapController($scope) {
// Variables
var vm = this;
vm.latitude = 0;
vm.longitude = 0;
vm.locationUpdated = false;
vm.buttonTextDefault = "Get Location";
vm.buttonText = vm.buttonTextDefault;
vm.buttonDisabled = false;
vm.divAdjustment = 0;
vm.message = "Map will display after getting Geolocation";
// Method Declarations
vm.getLocation = getLocation;
vm.setMapToDiv = setMapToDiv;
vm.showMapDialog = showMapDialog;
// vm.adjustDiv = adjustDiv;
// Gets the Current Geolocation for user
function getLocation() {
vm.buttonDisabled = true;
vm.buttonText = "Working...";
var options = { maximumAge: 0, timeout: 10000, enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,options);
vm.buttonDisabled = false;
}
function getLocationSuccess(position) {
console.log("found geolocation");
vm.latitude = position.coords.latitude;
vm.longitude = position.coords.longitude;
vm.buttonText = vm.buttonTextDefault;
googleMaps.positionMapToCoords(vm.latitude, vm.longitude);
vm.locationUpdated = true;
$scope.$apply();
}
function getLocationError(error) {
console.log("Error finding geolocation");
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
vm.buttonText = vm.buttonTextDefault;
$scope.$apply();
}
function setMapToDiv() {
googleMaps.setMapToDiv();
}
function showMapDialog() {
googleMaps.showMapDialog();
}
}
如果有人碰到这个，遇到同样的问题。我基本上找到了一个更像是解决方法而不是直接答案的解决方案，但可能会有所帮助。我决定仍然使用该插件来正确地为文本着色，但其余的我手动管理。
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString('#1D1D1D');
StatusBar.styleLightContent();
然后一些CSS
#statusBar {
background-color:#1D1D1D;
width:100%;
min-width:100%;
overflow: auto;
min-height:20px;
height:20px;
}
我将此 div 作为菜单栏的一部分。菜单栏是它自己的 angular 组件。在控制器中，我有一个检查 OS 版本的方法。感谢这个post：Detecting iOS / Android Operating system
snApp.controller('menuBarController', ['$mdSidenav', '$window', '$googleMapsService', MenuBarController]);
function MenuBarController($mdSidenav, $window, $googleMapsService) {
var vm = this;
var leftMenuId = 'left';
vm.isIosValue = false;
vm.$onInit = function() {
vm.isIosValue = vm.checkForIos();
}
vm.operatingSystem = null;
vm.toggleLeftMenu = toggleLeftMenu;
vm.getMobileOperatingSystem = getMobileOperatingSystem;
vm.checkForIos = checkForIos;
vm.isIos = isIos;
vm.googleMaps = $googleMapsService;
function toggleLeftMenu() {
mapDivManagement();
$mdSidenav(leftMenuId).onClose(mapDivManagement).toggle();
}
function mapDivManagement() {
if(vm.googleMaps.checkMap() && $window.location.hash == "#/map")
{
if($mdSidenav(leftMenuId).isOpen()) {
console.log("vm.googleMaps.revealMap(true);");
vm.googleMaps.revealMap(true);
}
else {
console.log("vm.googleMaps.revealMap(false);");
vm.googleMaps.revealMap(false);
}
}
}
/**
* Determine the mobile operating system.
* This function sets global variable to one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*
* Source:
*/
function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
//debugger;
// Windows Phone must come first because its UA also contains "Android"
if (/windows phone/i.test(userAgent)) {
// return "Windows Phone";
vm.operatingSystem = "Windows Phone";
}
else if (/android/i.test(userAgent)) {
// return "Android";
vm.operatingSystem = "Android";
}
// iOS detection from:
else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
// return "iOS";
vm.operatingSystem = "iOS";
}
else {
vm.operatingSystem = "unknown";
}
// return "unknown";
}
function checkForIos() {
vm.getMobileOperatingSystem();
//vm.operatingSystem = $window.operatingSystem;
if(vm.operatingSystem == 'iOS') {
return true;
}
else {
return false;
}
}
function isIos() {
return vm.isIosValue;
}
}
最后，在我的 menubar.html 文件中，我有这个 div:
<!-- Status Bar -->
<div ng-show="menuBarController.isIos()" id="statusBar"></div>
这将根据 OS 显示或隐藏 div。
不确定这将如何在通话中发挥作用，但它会让你走得更远。