I have a scenario in my code where I am using two directives. One directive is within the controller scope, while the other directive is not located in the html section.
<div ng-show="isStore==true">
<packgroup-directive>
</packgroup-directive>
<div class="lineBreaker" ng-if="groupList.length>0"></div>
<div ng-controller="WalletController">
<outfit-directive></outfit-directive>
<div class="imageContainer" ng-show="getPurchaseState() == false" ng-click="buyAllOutfit()">
<img class="feature1" ng-src="/app/app_resources/language/en/resources/{{buyAllOutfitBanner}}"/>
<div class="buttonBanner">{{allOutfitBannerValue}}
<img style="width: 20%" ng-src="/app/app_resources/icons/pep_sign_black.png"></div>
</div>
</div>
The issue arises because the packgroup-directive does not have the controller tag outside, while the outfit-directive is placed inside the WalletController tag.
The specific problem I am encountering involves a variable called popupopen that controls the closing of a popup. In my controller, I invoke this function from another JS file:
$scope.checkPopup = function(){
if(popupOpen==1 && dialogID!=null){
ngDialog.close(dialogID);
ngDialog.close($scope.dialogID);
bridge.getPopupState("0");
}
}
This function gets called from the external JS file, but the updated value only reflects for the packgroup directive and not for the outfit-directive. Strangely, when I remove it from the WalletController tag, the correct value is displayed.
Check out the full code here: https://jsfiddle.net/x1x1ug5y/