My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
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>NoHarm Safety Application</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/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496
Related
I am working on a Cordova/PhoneGap project. I tried to display js console.log in Xcode console.
I install the cordovan-plugin-console but it is not working.
After reading lost of stackoverflow post, I came up with this code:
<!DOCTYPE html>
<html>
<head>
<script>
function onDeviceReady() {
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
}
function init() {
document.addEventListener('deviceready', onDeviceReady, true);
}
</script>
<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>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/factories/DeviceFactory.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/DeviceController.js"></script>
</head>
<body ng-app="starter" onload="init()">
<script>
console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
</script>
<ion-nav-view></ion-nav-view>
</body>
</html>
However, it is still not working.
Could anyone help me?
Thanks
I don't know about Xcode's console being able to show a javascript console output but i know that you can do the same with safari dev tools, take a look at this : safari dev tools
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
I'm trying to make my own barcode scanner app. It should open like Snapchat which basically just means that when i'm opening the app the barcode scanner should showup immediately and not through clicking a button.
I'm using Cordova and Ionics and I'm currently using the barcode scanner plugin from Phonegap which actually works fine BUT i can't make it work through just opening the app. The screen will just be white. It's working when i'm using a button but in the other case not.
I'm new to Cordova and JavaScript and it would help me a lot if some of you can help!
Thanks a lot :)
<!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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
function scan() {
console.log("clicked");
cordova.plugins.barcodeScanner.scan(function(result) {
//success callback
alert(JSON.stringify(result));
}, function(error) {
//error callback
alert(JSON.stringify(error));
});
}
</script>
</head>
<body ng-app="starter">
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
<ion-content class="has-header">
<!--<button class="button button-positive" onclick="scan()">Click here to scan</button>-->
<script type="text/javascript">
scan();
</script>
</ion-content>
</body>
</html>
i would guess that your scripts haven't fully loaded, therefore you need to run scan() once this is complete. A simple way to do this is to add an onLoad attribute to your body tag:
<body onload="scan()">
I am trying to check out my ionic project which is built through angular js but unable to make runnable it on plunker. It's working on my local machine, with all rpm packages, etc
<!DOCTYPE html>
<html data-ng-app='starter.controllers'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-touch.js"></script>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body ng-app="starter" style="background-color: #E6E6FA; ">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Link to Plunker here, also need your suggestions to improve it
jQuery is not loading because plunker needs https. Just change the url to src="https://code....
And you are using ionic, so you should include ionic library.
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
I've tried building a simple Todo List app using ionic framework, however I've experienced a problem.
Whenever I add the ng-controller and ng-reapeat directives to my code, AngularJS expressions stop working.
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="starter">
<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>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">ToDo</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="todo in TodoList">{{todo.name}}</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('ionicApp', ['ionic'])
app.controller('TodoCtrl', function($scope){
$scope.TodoList = [
{name: "Item 1"},
{name: "Item 2"}
]
})
You are defining the core module of your app in app.js as:
var app = angular.module('ionicApp', ['ionic'])
However, in your html, you're defining your app as:
<html ng-app="starter">
In your ng-app attribute, you're defining this app as an Angular app, and you're referencing a module which does not exist (starter). You need to specify which Angular module to use, which in your app.js at the moment is ionicApp. So try renaming starter to ionicApp, or the otherway around, as long as they have matching names.