Geek Answers Handbook

Ionic / Angular hybrid application, the problem is

This is for the Ionic / Angular hybrid app. I am trying to fire a shake event using cordova-plugin-shake . It should reload a random image. So far, a random image is displayed during loading, but it does not work when testing the shake event in the simulator.

I get a ReferenceError: shake is not defined error ReferenceError: shake is not defined However, the documents say You do not need to reference any JavaScript, the Cordova plugin architecture will add a shake object to your root automatically when you build. What am I missing here? How can I make this work? I am using cordova ver 6.3.0.

Here app.js

 angular.module('TarotApp', ['ionic','ngAnimate']) .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(); } shake.startWatch(onShake, 40); }); }) angular.module('TarotApp') .controller('TarotCtrl', function ($scope) { $scope.tarotImg = ['1', '2', '3', '4', '5', '6']; $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)]; }); var onShake = function () { $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)]; };

Here index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/angular-animate/angular-animate.min.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app js --> <script src="js/app.js"></script> </head> <body ng-app="TarotApp"> <ion-pane> <!-- <ion-header-bar class="bar-stable"> </ion-header-bar>--> <ion-content ng-controller="TarotCtrl"> <img ng-src="img/{{randTarotImg}}.jpg" class="tarot"/> </ion-content> </ion-pane> </body> </html>
+1
source share
1 answer

The shake object is only added when created and deployed on a real phone. Not if you are testing in a browser. Add this to avoid testing errors.

 if(window.shake) shake.startWatch(onShake,40);
+2
source

More articles:


All Articles