AngulasJS、OnsenUI、Phonegap、警报在控制器内显示两次

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

本文关键字：显示 两次 控制器 Phonegap OnsenUI AngulasJS      更新时间：2023-09-26

我正在编写一个与OnsenUI结合的AngulasJS应用程序，并使用phonegab将其封装在android的应用程序容器中。

当我的应用程序作为一个新的应用程序进程运行时，问题就开始了，它会显示两次警报框。我完全不知道为什么。。。有什么想法吗？

我的应用程序有一个application.js文件，它是整个angularJS应用程序的实际引导程序，MainController.js是我的代码逻辑启动的"第一个"控制器。

您可以在github上找到所有代码：https://github.com/jorisbrauns/Gloss/

注意：我还试图将这个控制器内部的代码包装成

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

但这里有一个简短的片段，我的警报被调用：

(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);

搜索数小时后解决：-）

我想出了这个解决方案：

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();

完整代码可在以下网站上获得：https://github.com/jorisbrauns/Gloss

确保按正确顺序装入onsenui、angular和cordovo。只要看看我的github index.html.

相关文章：