angularjs加载顺序不固定

Question

我目前正在尝试使用 cordova 移动应用程序（Onsen.UI 框架）中的 angularjs 完成以下操作：

打开app/page
绘制地图
连接到SQL数据库
从数据库中获取标记
将标记加载到地图上的矢量图层

规则是在 'deviceready' 事件之前无法连接到数据库。因此，我的方法是 - 首先加载地图，然后将所有标记附加到现有地图的顶部。这种方法工作得很好，因为 'map' 页面在应用程序中默认打开。例如，如果我打开一个应用程序，然后移动到其他页面，然后返回 'map' 页面，那么加载函数的顺序就会不同，我的逻辑就会中断。这就是我的意思的例子：

fist load (app open)
==========
// module init
var app = angular.module('app', ['onsen', 'ngCordova'])
.run(function($rootScope, $location, $cordovaSQLite){
    ons.ready(function() {
        //// loaded 2   
    }
}
// controller init
app.controller('MapController', function ($scope, $timeout, $http, $cordovaSQLite, $cordovaFile, $cordovaFileTransfer, $cordovaZip, myService)
    ons.ready(function () {
        //// loaded 3

        // connect SQLlite database - OK
        // add markers to map object from SQL - OK
    }

    map init
    {
        //// loaded 1
        //MAP object loaded
    }
}

导航到菜单中的某个页面，返回第 1 页

second load
==========
// module init
var app = angular.module('app', ['onsen', 'ngCordova'])
.run(function($rootScope, $location, $cordovaSQLite){
    ons.ready(function() {
        //// not loaded 
    }
}
// controller init
app.controller('MapController', function ($scope, $timeout, $http, $cordovaSQLite, $cordovaFile, $cordovaFileTransfer, $cordovaZip, myService)
    ons.ready(function () {
        //// loaded 1

        // connect SQLlite database - OK
        // add markers to map object from SQL - Failure!!! Map object is not loaded yet! In fact - none of the functions are loaded yet so I cant reference to any of the code next!!
    }

    map init
    {
        //// nothing is loaded because my code breaks at previous step
    }
}

我只是想了解为什么序列会根据场景发生变化？是否可以像场景 1 那样让它始终发生？

第二个问题是 - 从 SQL 将标记加载到地图的适当方法是什么？应该什么时候发生？

无法从 mapInit 块加载标记，因为还没有连接到数据库！
标记无法加载到 ons.ready 块中，因为以防 nr。 2 地图对象尚未加载
我的地图对象创建依赖于函数，所以我不想将地图初始化集成到 ons.ready 块中并使其变得更加复杂

Answer 1

你能不能在你的地图对象创建函数上使用 promises 来确保在你尝试向地图添加标记之前一切都处于正确的状态。 https://docs.angularjs.org/api/ng/service/$q

您需要将依赖注入 $q 到您的控制器中。

function initMap(){
    var deferred = $q.defer();
    // init the map - call some functions
    generateAMapObject(function(){
        deferred.resolve(mapObject);
    })

    return deferred.promise;
}

然后在你的 ons.ready() 函数中你可以做类似

的事情

initMap.then(function(mapObject){
    // add your markers to the map object. You know it has been initialised.
}

angularjs加载顺序不固定

angularjs load sequence is not constant

angularjs

cordova

onsen-ui