Question

我正在开发移动应用程序（Ionic，Angular，Phonegap），但遇到Phonegap + AngularJS问题。

我在index.html：

中有这个

<body ng-app="myApplication" ng-controller="MainCtrl">
    <ion-nav-view></ion-nav-view>
</body>

所以我有一个名为home.html的模板，其中包含页眉，页脚和内容，该内容也由<ion-nav-view>处理，并随模板而变化。 home/something.html中的此内容具有单独的控制器，例如somethingCtrl。

问题：我将document.addEventListener放在MainCtrl中，这是所有观点的主要内容。据我所知，只有在触发了deviceReady后才能使用Phonegap API。

我的MainCtrl代码：

.controller('MainCtrl', function ($scope, $window, $rootScope, $location) {
    document.addEventListener("deviceready", onDeviceReady, false);

    alert('mainCtrl is loaded');

    function onOnline(){
                $rootScope.online = true;
            }
    function onOffline(){
                $rootScope.online = false;
            }

    function onDeviceReady() {
        alert('device is ready');
        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);
        getLocalBooksStorageUrl();
        }
    function getLocalBooksStorageUrl(){
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess,               null);
            function fileSystemSuccess(fileSystem) {
                var fp = fileSystem.root.toURL() + "/myApp"; // Returns Fulpath of local directory with my files
                $rootScope.localStorage = fp;
            }
        }
})

我想要访问$rootScope.localStorage的控制器的代码（我的应用程序中连接到此控制器的视图是第一个）：

.controller('MybooksCtrl', function ($scope, $rootScope) {
    alert('myBooks is loaded');
    console.log($rootScope.localStorage); // undefined
})

所以我有：

 alert -   mainCtrl is loaded
 alert -  myBooks is loaded
 console.log -  undefined ($rootScope.localStorage)
 alert - device is ready

我应该做什么或实施什么来强制第二个控制器的代码只在设备准备好后运行？

Answer 1

您可以使用$apply执行角度上下文之外的代码，然后触发摘要周期以更新视图。调用onDeviceReady()函数后，设置范围变量＆＃39; deviceReady＆＃39;为真。

.controller('MainCtrl', function ($scope, $window, $rootScope, $location) {
    $scope.deviceReady = false;
    document.addEventListener("deviceready", onDeviceReady, false);

    alert('mainCtrl is loaded');

    function onOnline(){
                $rootScope.online = true;
            }
    function onOffline(){
                $rootScope.online = false;
            }

    function onDeviceReady() {
       $scope.$apply(function() {
            alert('device is ready');
            document.addEventListener("online", onOnline, false);
            document.addEventListener("offline", onOffline, false);
            getLocalBooksStorageUrl();
            $scope.deviceReady = true;
        });
    }
    function getLocalBooksStorageUrl(){
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess,               null);
            function fileSystemSuccess(fileSystem) {
                var fp = fileSystem.root.toURL() + "/myApp"; // Returns Fulpath of local directory with my files
                $rootScope.localStorage = fp;
            }
        }
})

然后在你的MybooksCtrl＆＃39;中，$监视对deviceReady的更改：

.controller('MybooksCtrl', function ($scope, $rootScope) {
    $scope.$watch('deviceReady', function(newVal) {
        if (newVal) {
            alert('myBooks is loaded');
            console.log($rootScope.localStorage); // no longer undefined
        }
    });
})

AngularJS + Phonegap等待在控制器中触发的deviceReady（）事件

1 个答案: