I have below div element with nghide
<div ng-hide="showdiv" class="btnshowall">
<a class="button button-block round outline"
style="background: transparent !important;" >
Show All
</a>
</div>
and controller as below
.controller('mapCtrl', ['$scope', '$stateParams','User','$cordovaGeolocation','geoFireFac','GoogleMapFac','ConnectivityMonitor','PhysioFac','User',
function ($scope, $stateParams,User,$cordovaGeolocation,geoFireFac,GoogleMapFac,ConnectivityMonitor,PhysioFac,User) {
console.log('called mapctrl');
GoogleMapFac.setUserLoc($scope.map);
$scope.showdiv = User.getShowDiv();
}])
and User service as
.service('User', ['ToastFac',function(ToastFac){
return {
showDiv : false,
changeShowDiv : function(){
console.log('in changeShowDiv before change '+this.showDiv);
this.showDiv = !this.showDiv;
console.log('in changeShowDiv after change '+this.showDiv);
},
getShowDiv : function(){
return this.showDiv;
}
I am invoking User.changeShowDiv() from google map's marker click event like below
google.maps.event.addListener(marker, 'click', function () {
alert('store id '+marker.get('store_id'));
if(User.showDiv){
console.log('in if');
User.changeShowDiv();
console.log('User.showDiv '+User.showDiv);
}
else{
console.log('in else');
User.changeShowDiv();
console.log('User.showDiv '+User.showDiv);
}
});
logs are coming as expected
in else
services.js:123 in changeShowDiv before change false
services.js:125 in changeShowDiv after change true
services.js:218 User.showDiv true
services.js:211 in if
services.js:123 in changeShowDiv before change true
services.js:125 in changeShowDiv after change false
services.js:213 User.showDiv false
services.js:216 in else
services.js:123 in changeShowDiv before change false
services.js:125 in changeShowDiv after change true
services.js:218 User.showDiv true
By default, as User.showDiv variable is false, showAll button is visible. But button is not hiding & coming by marker click events.
Could someone guide me what I am missing.