离子/科尔多瓦无法读取未定义的属性“styleDefault”答案

【问题标题】：Ionic/cordova Cannot read property 'styleDefault' of undefined离子/科尔多瓦无法读取未定义的属性“styleDefault”
【发布时间】：2015-12-08 14:49:34
【问题描述】：

我已遵循this 指南，但在 Visual Studio 中运行波纹模拟器时无法使其工作。出现此错误：

我没有改变任何东西，只是按照指南。

编辑：我的 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() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)

            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

【问题讨论】：

请发布您的 app.js
已添加。我没有改变它。
您的目标是哪个平台？
我刚刚启动了涟漪网络浏览器模拟器，iPhone和Android都存在同样的问题。
哪个科尔多瓦版本？

标签： cordova ionic-framework visual-studio-2015 ionic ripple

【解决方案1】：

根据cordova-plugin-statusbar 文档，android 不支持此功能。

注释掉或者删除代码：

if (window.StatusBar) {
  // StatusBar.styleDefault();
}

如果您想保留其他平台的代码，请尝试将其放入 try/catch 块中

if (window.StatusBar) {
  try {
    StatusBar.styleDefault();
  } catch(ex) {
    console.log( "Statusbar.styleDefault() is not supported: ", ex );
  }
}

即使你还没有安装插件，也可以将它添加到你的项目中：

cordova plugin add cordova-plugin-statusbar

【讨论】：

安装了插件并添加了try-catch，它仍然会发生。编辑：cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);也会导致错误，但我添加了一个空检查。我似乎项目设置有问题，因为两者都会导致错误。
我必须将我的 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true) 代码包装在我的项目中的 try/catch 块中，以解决 android 上的问题。
要么每次点击成功，要么停止涟漪并使用android emulator

【解决方案2】：

有类似问题的人找到了解决方案here。它只是删除了ripple.js 模拟器中烦人的盒子。

    // I define this as a global function since I use it in other places
function isRunningInRipple(){
   // in an actual device(or emulator) all url's in the webview are 'file:// ... ' (since I don't load any external urls)
   return document.URL.indexOf('http://') >= 0 || document.URL.indexOf('https://') >= 0;
}

var app =  angular.module('myApp', [ ' ...dependencies...' ]);
app.run(['$ionicPlatform', '$timeout', '...other services...', function($ionicPlatform, $timeout, ...other services...){

  function disableRipplePopup() {
    var dialogBody = parent.document.getElementById("exec-dialog");
    var overlay = parent.document.querySelector(".ui-widget-overlay");
    var ngDialog = angular.element(dialogBody.parentElement);
    var ngOverlay = angular.element(overlay);
    var hideRules = { "height": "0px", "width": "0px", "display": "none" };
    ngDialog.css(hideRules); // hide annoying popup
    ngOverlay.css(hideRules); // hide annoying popup's backdrop
  }

  $ionicPlatform.ready(function(){
    // ... some app bootstrap code    

    if(isRunningInRipple()) $timeout(disableRipplePopup);

   // ...  more app bootstrap code
  });

}]);

【讨论】：