离子空白模板默认隐藏附件栏不起作用答案

【问题标题】：Ionic blank template hide the accessory bar by default not working离子空白模板默认隐藏附件栏不起作用
【发布时间】：2015-07-27 16:34:12
【问题描述】：

您好，我开始了一个空白的 ionic 项目。在 app.js 文件中有这段代码：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

据我了解，上面的代码确实做了两件事。它隐藏了键盘上方的附件栏。并将您的状态栏样式设置为默认样式。

看起来两者似乎都不起作用。当我测试我的应用程序时，离子视图应用程序附件栏仍然存在。

当我从

更改状态栏样式代码的一部分时

StatusBar.styleDefault();

到

StatusBar.overlaysWebView(true); StatusBar.styleLightContent();

状态栏还是默认样式（深色），我想要浅色的状态栏。

我是做错了什么，是我遗漏了什么，还是我理解上面的代码有误。

谢谢！！

config.xml：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.testapp582099" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>test_app</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

【问题讨论】：

打开键盘时应该隐藏状态栏的代码是什么？？
if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } - 它在我问题的第一个代码块中
这会隐藏：使用下一个、上一个和完成按钮隐藏键盘附件栏。这与状态栏无关，链接到以下插件github.com/driftyco/ionic-plugin-keyboard
要隐藏状态栏，您需要使用 Statusbar.hide (请参阅此处的文档：github.com/apache/cordova-plugin-statusbar)
@aorfevre 抱歉，我知道，我粘贴了错误的代码。 if(window.StatusBar) { StatusBar.overlaysWebView(true);状态栏.styleLightContent(); } - 这应该将状态栏更改为白色文本

标签： javascript ionic-framework statusbar

【解决方案1】：

添加插件后它应该可以工作：

$ cordova plugin add org.apache.cordova.statusbar

由于某种原因，该插件不会自动安装在 Ionic 入门项目中，即使它已在代码中使用。更多信息：http://learn.ionicframework.com/formulas/customizing-the-status-bar/

要使其在 Ionic View 中工作，您可能需要做更多工作。

安装 ngCordova：http://ngcordova.com/docs/install/。确保ng-cordova.js 位于 angular.js 和cordova.js 之间。无论如何，这还不错，以防您想使用更多 ngCordova 插件。
作为 Angular 依赖注入 angular.module('myApp', ['ngCordova'])
运行$ cordova plugin add cordova-plugin-statusbar。请随意删除上面的插件（它们可能相同也可能不同......）。
将$cordovaStatusbar 注入您的.run 块（如果需要，您也可以注入控制器等）。
像以前一样使用，但像这样：$cordovaStatusbar.hide()。
如果您的代码位于 $ionicPlatform.ready 中，它可能无法在 Ionic View 中按预期工作（请参阅：https://github.com/driftyco/ionic-view-issues/issues/52）。要使其正常工作，请将其包装在 $timeout 中，或者

因此，如果您不反对小技巧，那么在 Ionic 加载之前将 <script>window.phonegap = {}</script> 添加到您的 <head> 应该会强制它等待 deviceready 事件，而不会在加载后踩到 Cordova 的脚趾。比到处写 $timeout 要简单得多。

【讨论】：