CODEWITHSUNDEEP
angularjsangularjs-directive
Nilesh Nartam
Nilesh Nartam

Reputation: 296

how to call method in controller on click of element in directive template

my controller is-

var App = angular.module("App",[]);
App.controller("MainController",['$scope',function($scope){
   $scope.getDetail = function(){
      console.log("get detail call from main controller");
   }
}]);

directive is-

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
      },
      template :'<div><button type="button">click here to get detail</button></div>',
     link : function(scope,element,attribute){

     }
   };
}]);

page html is-

 <div ng-controller="MainController">
        <custom-directive></custom-directive>
    </div>

i am trying to call the getDetail in MainController on click of button inside the custom directive.

Upvotes: 0

Views: 639

Answers (2)

Manish M Demblani
Manish M Demblani

Reputation: 910

There are two possible ways:

  1. Parent Controller Scope
  2. Isolated Scope

Parent Controller Scope

By default any directive you write has access to the parent controllers scope, which means that the directive can directly call the parent controller function without any extra hassle. To perform the task in this fashion, your directive code should be this way:

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      template :'<div><button type="button" ng-click="getDetail()">click here to get detail</button></div>',
     link : function(scope,element,attribute){
          //Call the controller function directly in using the scope object
     }
   };
}]);

In this technique, the entire scope of the parent controller is accessible by the directive and the directive can directly use the parent controllers scope. This method is very useful, if you want to use the directive specifically with one controller only, since this makes the directive less re-usable.

Isolated Scope

A second more better approach towards writing directives is the isolated scope technique. In this the directive cannot directly access the parent controllers scope, and the functions that are to be accessed by the directive are passed down to it. Think of this method as such that a wall exists between two land areas and only selective access is allowed between the lands. To use this technique your code would as follows:

HTML code of calling the directive:

<div ng-controller="MainController">
        <custom-directive detail-function="getDetail()"></custom-directive>
</div>

Direcitve Block:

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
          detailFunction='&'
      },
      template :'<div><button type="button" ng-click='detailFunction()'>click here to get detail</button></div>',
     link : function(scope,element,attribute){

     }
   };
}]);

The following link contains the demo to your question. Sample Code

Referene

Creating Custom AngularJS Directives Part 2 – Isolate Scope

Upvotes: 0

Chathura Hettiarachchi
Chathura Hettiarachchi

Reputation: 131

Did you heard about isolated scope.. that is the way to connect between controller and nested directives

    <div ng-controller="MainController">
            <custom-directive="getDetail()"></custom-directive>
    </div>

var App = angular.module("App",[]);
App.controller("MainController",['$scope',function($scope){
   $scope.getDetail = function(){
      console.log("get detail call from main controller");
   }
}]);

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
        customDirective:'&'
      },
      template :'<div><button type="button" ng-click="heyimclick()">click here to get detail</button></div>',
     link : function(scope,element,attribute){
           scope.heyimclick=function(){
                 customDirective();
             }
     }
   };
}]);

Upvotes: 1

Related Questions