angularjs selft $broadcast and $on

Question

I have created custom directive something like drop down but in my case items open in modal popup and after selection item will selected in div.

Now I added two directive (i.e. two instance of same directive) and using this two directive work as parent child way. I am getting item from rest api then assign to first directive(i.e. parent) and based on selection of first directive I am filtering another rest api then assign to second directive (i.e. child) which is working very good. But I wanted to reset value (selected item) of the second directive whenever change selection on first directive.

I added below code to my directive but it did not help me

controller: ['$scope', '$rootScope',
        function($scope, $rootScope) {
          $scope.$watch('value', function(val) {
            $rootScope.$broadcast('valueChanged', $scope.id);
          });
          $scope.psChanged = function() {
            $scope.$on('valueChanged', function(event, value) {
              if (value === $scope.id) {
                //Do nothing.
              } else {
                console.log("Text change");
              }
            });
          }
        }
      ]

My full working plunker http://plnkr.co/edit/f6LYS2aGrTXGkZ3vrIDD?p=preview

Can somebody help me to get it done !!

Answer 1

I added one more attribute in isolated scope, called isChild, when it`s true im listening for event valueChanged. So i bind even listener in controller without function psChanged, and it works.

angular.module('plexusSelect', []).directive('plexusSelect', ['$ionicModal', '$timeout', '$ionicScrollDelegate', '$rootScope',
  function($ionicModal, $timeout, $ionicScrollDelegate, $rootScope) {
    // Runs during compile
    return {
      scope: {
        'items': '=',
        'id': '@',
        'text': '@',
        'textIcon': '@',
        'headerText': '@',
        'textField': '=',
        'valueField': '@',
        'callback': '&',
        'isChild' : '@'
      },
      require: 'ngModel',
      restrict: 'E',
      templateUrl: 'plexusSelect.html',
      controller: ['$scope', '$rootScope',
        function($scope, $rootScope) {
          $scope.$watch('value', function(val) {
            $rootScope.$broadcast('valueChanged', $scope.id);
          });
          if ($scope.isChild === 'true') {
          //$scope.psChanged = function() {
            $scope.$on('valueChanged', function(event, value) {
              if ($scope.id === value) {
                //Do nothing.
              } else {
                $scope.clearSearch();
                $scope.value = '';
                $scope.text = $scope.defaultText;
                console.log("Text change");
              }
            });

          }
        }
      ],

html

<ion-view view-title="Search" ng-controller='SearchCtrl'>
    <ion-content>
    <h1>Search</h1>
  <plexus-select id="psDeparture"  is-child='false' items="deptStations" header-text="Select Departure Station" text="Select departure..." text-icon="icon-takeoff" text-field="['City_Name_EN','City_Code']" value-field="City_Code" ng-model="deptStation.value"></plexus-select>
    <plexus-select id="psArrival" is-child='true' items="arrStations" header-text="Select Arrival Station" text="Select arrival..." text-icon="icon-landing" text-field="['Destination.City_Name_EN','Destination.City_Code']" value-field="Destination.City_Code" ng-model="arrStation.value"></plexus-select>
    </ion-content>
</ion-view>

plunk