Greatym.com Greatym.com - 3 months ago 18
AngularJS Question

How to call $scope.closePopup on click in angular js?

I created the popup when I am trying to call action on click for close pop up icon no change is shown.

This is the plunker for code https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.

<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>

<!-- html of change zip code -->

<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>


Change zip code action is written in autoQuotectrl.js

$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}


To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .

$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}


But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl

Answer

You don't invoke function closePopup in template.

See example on plunker.

  <div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
    <!-- Modal content -->
      <div class="popup-content">
        <span class="close" ng-click="closePopup()">×</span>
        <div class="dynamicContect" id="dynamicContect"> Loading ...
      </div>
    </div>
  </div>