CODEWITHSUNDEEP
javascriptangularjs
pedropeixoto
pedropeixoto

Reputation: 1633

Ng-show not reacting to scope variable change

First I set the boolean value of the infoWindow to false:

$scope.infoWindow = false;

Then I've got a google maps listener for a click like so:

google.maps.event.addListener(circle, 'click', function(event) {
    $scope.toggleInfoWindow();
});

Which is firing this function:

$scope.toggleInfoWindow = function() {
    $scope.infoWindow = !$scope.infoWindow;
}

And finally I have the following in my template:

<div ng-show="infoWindow"><h1>Info Window</h1></div>

It should display the div whenever someone clicks the circle, but it's not reacting to the change in $scope.infoWindow. I'm sure it's changing too, because I logged it value on click with console.log() and it does indeed change from "false" to "true" etc.

So what's happening here?

Upvotes: 1

Views: 1749

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

You need to use a $scope.$apply() anytime you do something outside of angular. As you mentioned you're using google maps so the line would need to be added there.

google.maps.event.addListener(circle, 'click', function(event) {
    $scope.toggleInfoWindow();
    $scope.$apply();
});

Here's the documentation on it: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Upvotes: 3

Related Questions