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

AngularJs: unable to toggle the visibility of two elements

本文关键字：两个 元素 可见性 AngularJs      更新时间：2023-09-26

我使用这种方法:

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。准备好接受。

在我的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。准备好接受。所以js代码是工作的

问题是: 'Connecting to Device"仍然可见，即使MyController。Ready设置为true

如何调试?

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

app.controller('MyController', ['$scope', 'CordovaService', function($scope, CordovaService) {
    $scope.ready = false;
    CordovaService.ready.then(function() {
        console.log ("CordovaService.ready received");
        $scope.ready = true;
    });
}]);

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

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

这个的实际原因。ready在CordovaService.ready.then(function(){})函数中不工作，'this'将采用当前函数的作用域，即CordovaService.ready.then(function()而不是作用域，这就是为什么你的作用域没有更新

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

编辑:我的回答很短，这里是一个扩展版本:

如文档所述:

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

如果你想公开一个变量并在视图中获取更新后的值，你需要使用$作用域。如果您使用this，则仅指控制器内的局部作用域，并且视图无法知道此变量。

相关文章：