I'm having the weirdest issue getting ng-click to fire in my angular app.
Here's what I'm dealing with:
<div class="popup" id="perks-popup" ng-if="perksPopup === true">
<div class="popup-bkg" ng-click="perksPopup = false;"></div>
<div class="popup-content">
<div class="popup-close" ng-click="perksPopup = false;">
<img class="scalableImg" src="img/icons/close-blue.png" alt="">
</div>
</div>
</div>
and here is the base controller:
(function(){
"use strict";
Caribou2015.controller('BaseController', ['$rootScope', '$scope', 'Dates', function($rootScope, $scope, Dates){
console.log('base controller init');
//overlay and popup states
$rootScope.welcomePopup = false;
$rootScope.perksPopup = true;
$rootScope.calPopup = false;
}]);
})();
with this setup what I expect to happen is that the perks popup div will show up and when I click its background or the popup-close div, it gets removed by ngIf. Well it shows up just fine but clicking the close or the background does nothing. I even added a $rootScope.$watch
on the variable to see if it changes and I get nothing. It seems like the ng click event isn't firing at all. Is there something I'm missing?
Don't pollute
$rootScope
its bad pattern, do useservice/factory
while you wanted to share data between various component.
ng-if
does create a prototypically inherited child scope on that element valued data type will not get there value populated in that div
, you need to add $parent.
to access scope variable, before an As you are using scope variable ng-if
that is causing an issue you need to follow the dot rule while declaring model, suppose that would be $scope.model={}
in scope then assign all the properties and use it on html.
Markup
<div class="popup" id="perks-popup" ng-if="model.perksPopup === true">
<div class="popup-bkg" ng-click="model.perksPopup = false;"></div>
<div class="popup-content">
<div class="popup-close" ng-click="model.perksPopup = false;">
<img class="scalableImg" src="img/icons/close-blue.png" alt="">
</div>
</div>
</div>
Controller
$scope.model = {};
$scope.model.perksPopup = true;