javascript - AngularJS、Onsen UI、Phonegap、警报在 Controller 内显示两次

Question

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

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

我的应用程序有一个 Application.js 文件，它是整个 angularJS 应用程序的实际 Bootstrap ，而 MainController.js 是我的代码逻辑开始的“第一个” Controller 。

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

注意:我还尝试将此 Controller 内部的代码包装到

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

但是这里有一个简短的 fragment ，其中我的警报被调用:

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

Answer 1

经过几个小时的搜索后解决了:-)

我想出了这个解决方案:

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 即可。