CODEWITHSUNDEEP
javascriptangularjs
arqam
arqam

Reputation: 3779

Not retaining $scope when using directive inside controller scope

In my code I have two directives. One is inside the controller scope and the other is not in the html part.

  <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>

Here packgroup-directive is not having the controller tag outside and the outfit-directive is inside the WalletController tag.

So the problem I am facing is that I am having a variable popupopen which controls the closing of the popup. In my controller I call 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 is called from other JS file but the updated value is only shown for the packgroup directive but not for the outfit-directive, but when I remove it from the WalletController tag it displays the correct value.

Code : https://jsfiddle.net/x1x1ug5y/

Upvotes: 1

Views: 38

Answers (1)

Drag13
Drag13

Reputation: 5988

The problem is that you have two isolated scopes. One is parent (used by packgroup) and one is child (used by WalletController). So to achive desired behavior you need to share data between them. This can be done with next approach:

  1. Put your variable to the $rootScope and get this variable from the $rootScope from child controller. Pros: simle; Cons: Polluting global scope is a bad idea.
  2. Use event emitting approach. At the parent scope, handle variable changing and broadcast this value. Child controller will catch it and update. Pros: simple; Cons: Direct event approach makes your application a bit harder to debug and maintain. (IMHO)
  3. Use special service to share data between controller. The most common approach. Pros: Clear way to share data Cons: Requires more code
  4. Use components and pass data to child controller as a parameter Pros: Much more clear way to share data. Cons: Need to have angular 1.5 and a bit time to rework.
  5. Workaround.Define your variable as: $scope.popup = {isOpen:false} and then try to get this object (not isOpen field) on the child controller. Due to $scope's inheritance this also can work. Pros: Simple; Cons: Getting variables imlicitly makes your app much harder to understand and can lead to unexpected bug.

Hope this helps. Also you can read this article

Upvotes: 1

Related Questions