Question

我正在使用这种方法：

app.js

(function(){

    var app = angular.module('myApp', ['fsCordova']);

    app.controller('MyController', function($scope, CordovaService) {

        this.ready = false;

        CordovaService.ready.then(function() {

            console.log ("CordovaService.ready received");
            this.ready = true;
        });

    });

})();

我可以在控制台中看到消息 CordovaService.ready received 。所以代码正在运行。

在我的 index.html 中我就是这个（只是有用的部分）。

    <body ng-controller="MyController">
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening" ng-hide="ready">Connecting to Device</p>
                <p class="event received"  ng-show="ready">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
    </body>

只是为了完整性，这是.css文件的相关部分

.event.listening {
    background-color:#333333;
}

.event.received {
    background-color:#4B946A;
}

.blink {
    animation:fade 3000ms infinite;
}

我会重复：我可以在控制台中看到消息 CordovaService.ready received 。所以js代码正在运行。

问题是：即使MyController.ready设置为true，“连接到设备”仍然可见。

如何调试？

Answer 1

尝试使用$scope.ready代替this.ready

编辑：我的答案非常简短，这是一个扩展版本：

正如文件所说：

Scope是应用程序控制器和视图之间的粘合剂

如果要公开变量并在视图中获取更新的值，那么您可以使用$ scope。如果使用this，则仅指控制器内的本地范围，视图无法知道此变量。

Answer 2

您应该使用$scope在控制器和模板之间共享状态。

app.controller('MyController', ['$scope', 'CordovaService', function($scope, CordovaService) {

    $scope.ready = false;
    CordovaService.ready.then(function() {
        console.log ("CordovaService.ready received");
        $scope.ready = true;
    });

}]);

Answer 3

你需要让控制器看起来像这样：

(function(){

    var app = angular.module('myApp', ['fsCordova']);

    app.controller('MyController', ['$scope','CordovaService',function($scope, CordovaService) {

        $scope.ready = false;

        CordovaService.ready.then(function() {

            console.log ("CordovaService.ready received");
            $scope.ready = true;
        });

    }]);

})();

为什么this.ready在CordovaService.ready.then（function（）{}）函数内部无效的实际原因是＆＃39; this＆＃39;将采用CordovaService.ready.then（function（）的当前函数的范围，而不是范围未更新的范围。

AngularJs：无法切换两个元素的可见性

3 个答案: