angular broadcast from directive

Question

I am trying to broadcast from one directive (claim-points) to another directive (banner-points) on the click of the Claim Points button.

<button name="button" claim-points>Claim Points</button>

I'd like to hide this "Banner Button" element until the broadcast is sent from claim-points directive to the banner-points directive:

<div name="bannerBtn" banner-points ng-if="isVisible">html from banner-points directive displayed here</div>

So, on Claim Points button click, it's getting and looping through some data... if it finds a match, it broadcasts to showbanner:

angular
    .module('myApp')
    .directive('claimPoints', ['$rootScope', '$http', function ($rootScope, $http) {
        return {
            restrict: 'AE',
            link: function (scope, elem, attr) {
                elem.bind('click', function() {
                    $http.get('/testJSON/points.json').success(function(data) {
                            var found = false;
                            angular.forEach(data.data, function(v, k) {
                                if (!found) {
                                    if (v.award_name === attr.award) {
                                        found = true;
                                        $rootScope.$broadcast('showbanner', v.points);
                                    }
                                }
                            }
                        );
                    });
                });
            }
        };
    }
]);

The broadcast should be sent to scope.$on('showbanner, ...here and set the "Banner Button" attributeisVisibleto true... which should trigger theng-if` on the button.

angular
    .module('myApp')
    .directive('bannerPoints', function () {
        return {
            restrict: '',
            templateUrl: '<div>some html I want to display',
            link: function (scope, elem, attr) {
                attr.isVisible = false;
                scope.$on('showbanner', function(e, b) {
                    attr.isVisible = true;
                });
            }
        };
});

The broadcast is not happening.

Answer 1

There is no need to create bannerPoints which will have $on listener, as you directive is not creating isolated scope, you need to only pass isVisible scope variable name to claimPoints directive then instead of broadcasting you could directly use scope[attrs.isVisible] & make it true so the ng-if="isVisible" will gets satisfied and that button will get shown.

Markup

<button name="button" claim-points is-visible="isVisible">Claim Points</button>

<button name="bannerBtn" ng-if="isVisible">
    <div>some html I want to display></div>
</button>

Directive

angular.module('myApp')
.directive('claimPoints', ['$rootScope', '$http', function($rootScope, $http) {
  return {
    restrict: 'AE',
    link: function(scope, elem, attr) {
      elem.bind('click', function() {
        $http.get('/testJSON/points.json').success(function(data) {
          var found = false;
          angular.forEach(data.data, function(v, k) {
            if (!found) {
              if (v.award_name === attr.award) {
                found = true;
                //this will set isVisible scope to true
                scope[attrs.isVisible] = true;
              }
            }
          });
        });
      });
    }
  };
}]);