CODEWITHSUNDEEP
javascriptandroidangularjscordovaonsen-ui
Joris Brauns
Joris Brauns

Reputation: 363

AngulasJS, OnsenUI, Phonegap, alert is showed twice inside a controller

I'm writing an AngulasJS application combined with OnsenUI and using phonegab to wrap it inside a app container for android.

The issue starts when running my application as a new app process, its showing an alert box twice. And i have totaly not a clue why... so any idea's?

My application has a Application.js file which is the actual bootstrap of the whole angularJS app and MainController.js is the 'first' controller where my code logic starts.

You can find all the code on github: https://github.com/jorisbrauns/Gloss/

Note: i also tried to wrap the code from inside this controller into a 

ons.ready(function() {
// But this had no effect on my alert, still twice ... :-(
})();

But here a short snippet where my alert is being called:

(function (app) {
    'use strict';
    app.controller('MainController', ['$scope', 'authService', function ($scope, authService) {

    //Retreive a object from localstorage
    $scope.authentication = authService.authentication; 

    //This is shown twice for an odd reason?
    alert("isAuth: " + $scope.authentication.isAuth + " / username: " + $scope.authentication.userName);

    //Figure out which page to show
    if (page.name == "") {
        if ($scope.authentication.isAuth) {
            _RedirectToMain();
        } else {
            $scope.mainNavigation.pushPage("views/login.html", {
                animation: 'none',
                onTransitionEnd: function() {}
            });
        }
    }
   // More code is here below, but not related to the issue (or not that i suspect it to be)

})(application);

Upvotes: 0

Views: 554

Answers (1)

Joris Brauns
Joris Brauns

Reputation: 363

Solved after hours of searching :-)

I came up with this solution:

var app = {
// Application Constructor
initialize: function() {
    window.application = window.angular.module('Gloss', ['onsen']);
    this.bindEvents();
},

// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline',  'online', 'pause' and etc
bindEvents: function() {
    document.addEventListener('load', this.onLoad, false);
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
onLoad: function() {

},

// deviceready Event Handler
onDeviceReady: function() {
    // If you like to have a splashscreen... (not needed for the solution, its fancy however)
    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    //Device is ready, load angularjs into the dom
    window.angular.bootstrap(document,['Gloss']);
}

};

app.initialize();

The whole code is available on: https://github.com/jorisbrauns/Gloss

Make sure you load the onsenui, angular and cordovo in the correct order. Just look on my github index.html.

Upvotes: 1

Related Questions