Access $scope from within $scope.$on

Question

I have this code:

.directive('hostelGridBed', function($rootScope){
return {
    restrict: 'E',
    scope: {
      config: '=',
      range: '=',
      days: '='
    },
    link: function(scope, element){

    },
    controller: ['$scope', function($scope){
      $scope.innerStay = '';
      function switchStay(data){
        $rootScope.$broadcast('SwitchStay', {data: data.config});
      };
      $scope.onDropComplete = function(data,evt){
        //$rootScope.$broadcast
        switchStay(data);
        console.log('Drop completo bed!');
      }
    }],
    templateUrl: './js/templates/hostelgridbed.html'
  }
})

.directive('hostelGridDay', function(StaysFactory){
  return {
    restrict: 'E',
    scope: {
      config: '=',
      date: '='
    },
    link: function(scope,element){
    },
    controller: ['$scope','$rootScope', function($scope,$rootScope){
      $scope.switchStay = function(evt, data){
        console.log(data);
        // Here. How can I access this controller's $scope
      }
      $scope.$on('SwitchStay', $scope.switchStay);
    }],
    templateUrl: './js/templates/hostelgridday.html'
  }
})

I get data from $broadcast ok, it's all good. Except that I need to access the directive's $scope from within $scope.switchStay function. Is there a way to accomplish that?

Answer 1

Actually when you $broadcast or $emit the event from the directive, you could send also the directive's scope as parameter. It should work, but this is actually awful and a really bad practice.

What you have to do in these cases is to add a callback parameter to the directive (&) and provide the switchStay function as callback, and simply trigger it from the directive, passing the parameters that you need to access inside the function.

I hope it makes sense.