CODEWITHSUNDEEP
javascriptjqueryangularjs
realtebo
realtebo

Reputation: 25699

AngularJs: unable to toggle the visibility of two elements

I'm using this approach:

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

    });

})();

I can see in console the message CordovaService.ready received. So the code is working.

In my index.html I've this (only usefull portion).

    <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>

Just for mattar of completeness, this is the relevant part of .css file

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

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

.blink {
    animation:fade 3000ms infinite;
}

I'll repeat: I can see in console the message CordovaService.ready received. So the js code is working.

The problem is that: 'Connecting to Device" remains visible, even if MyController.ready is set to true.

How to debug?

Upvotes: 0

Views: 71

Answers (3)

Alexandre Nucera
Alexandre Nucera

Reputation: 2223

Try using $scope.ready instead of this.ready

Edit : My answer was quite short, here is an expanded version :

As the documentation says :

Scope is the glue between application controller and the view

If you want to expose a variable and get the updated value inside your view, you new to use the $scope. If you use this, you are referring to the local scope inside your controller only and the view has no way to know this variable.

Upvotes: 1

V31
V31

Reputation: 7666

you need to have the controller look like this:

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

    }]);

})();

The actual reason why this.ready was not working inside CordovaService.ready.then(function() {}) function was the 'this' will take the scope of the current function that is that of CordovaService.ready.then(function() rather than the scope that is why your scope was not updating.

Upvotes: 1

Vadim
Vadim

Reputation: 8789

You should use $scope to share state between controller an template.

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

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

}]);

Upvotes: 1

Related Questions