My dilemma involves an aside that will appear as a pop-up modal, allowing users to interact and choose between two options. If the user decides to reject the offer, I want to hide both the pop-up modal and the overlay.
Hiding the modal is not an issue - the ng-show function works perfectly. However, the overlay (a separate element in a different part of the codebase) does not update its display accordingly, even though it uses the same directive and value from a singleton. How can I ensure that they are both synchronized?
Here's the modal
<aside data-ng-show="!customerRejectedOffer" data-pi-browser-update class="md-modal md-show pi-modal-message modal-effect-2">
<div class="pi-modal-content">
<h4>Title</h4>
<div>
<p>Copy</p>
<ul class="flush--left nav--no-style-type">
<li>
<button class="pi-modal-content-button wb-btn wb-btn--secondary">
<a class="pi-modal-content-link" href="#" title="Upgrade Button">
<admin:keyvalues key="datedbrowser.iebutton"/></a>
</button>
</li>
<li><button class="pi-modal-content-button pi-modal-content-button__refusal" data-ng-click="rejectOffer()"><a class="pi-modal-content-link" title=""></a></button></li>
</ul>
<button data-ng-click="rejectOffer()" class="pi-modal-content-close md-close">X</button>
</div>
</div>
</aside>
To handle the show/hide values and click events, I've implemented a directive.
(function() {
'use strict';
angular
.module('pi.common.browserupdateMessage', ['pi.common.storage'])
.directive('piBrowserUpdate', browserUpdate);
function browserUpdate(SharedScopeUtility) {
return {
link: browserUpdateLink
};
function browserUpdateLink(scope) {
scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
console.log(scope);
scope.customerRejectedOffer = customerRejectedOffer;
function rejectOffer()() {
SharedScopeUtility.hasAcceptedUpgrade = true;
scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
}
}
}
}());
In the directive, I initialize the customerRejectedOffer value using a service called SharedScopeUtility.
(function() {
'use strict';
angular.module('pi.app.sharedscopeutility', [
'ngResource'
])
.factory('SharedScopeUtility', function (){
var hasAcceptedUpgrade = false;
var _service = {
hasAcceptedUpgrade: hasAcceptedUpgrade
};
return _service;
});
}());
When the user clicks the "Rejected Offer Button," the rejectOffer() function is triggered within the directive. This function updates the value on the service from false to true, and sets a new value on the scope called customerRejectedOffer, which is then used for ng-show. While this works for the pop-up modal, the overlay element:
<div data-pi-browser-update data-ng-click="rejectOffer()" data-ng-show="!customerRejectedOffer" class="pi-modal-overlay"></div>
Using the same directive and value for its ng-show, the overlay remains visible despite the changes. Although I utilized a service to make the rejectedOffer boolean come from a singleton, it still doesn't resolve the issue. Any assistance would be greatly appreciated :-)