如何从2级指令访问控制器范围

Question

I am trying to build generic code as much as possible.

So I'm having 2 directives, one nested inside the other while I want the nested directive to call a method on the main controller $scope.

But instead it requests the method on the parent directive, I want to know how to execute a method against the main controller scope instead of the parent directive.

Here is a sample code for my issue My HTML should look something like this:

<div ng-controller='mainctrl'>
  <div validator>
    <div datepicker select-event='datepickerSelected()'/>
  </div>
</div>

Javascript:

var app = angular.module("app",[]);

var mainctrl = function($scope){
  $scope.datepickerSelected = function(){
    //I WANT TO ACCESS THIS METHOD
  }
}

app.directive("validator",function(){
  return {
    scope : {
      //the datepicker directive requests a datepickerSelected() method on this scope
      //while I want it to access the mainctrl scope
    }
    link: function(scope){
      //some code
    }
  }
});

app.directive("datepicker", function(){
  return{
    scope: {
      selectEvent: '&'
    }
    link: function(scope, elem){
      //example code
      $(elem).click(scope.selectEvent); //want this to access mainctrl instead validator directive
    }
  }
});

Answer 1

Simply remove the validator directive's scope property, thus eliminating its isolated scope. That means that validator will have the same scope that it is nested in (your controller) and datepicker will use that scope.

Another option if you want both to have isolated scopes (doesn't sound like you do) is to pass the function through to "validator's" scope.