How to pass functions to custom directives

In AngularJS, you can pass functions to custom directives using directive bindings. This allows you to bind functions from the controller or parent scope to the directive, enabling the directive to execute or trigger certain actions when necessary.

To pass functions to a custom directive, you typically use the & binding in the directive’s scope. The & binding allows you to pass an expression (like a function) from the parent scope to the directive, and the directive can then invoke that function.

Steps to Pass Functions to Custom Directives

1. Define the Parent Controller and Function: In your parent controller, define the function that you want to pass to the custom directive.
2. Pass the Function Using the Directive’s Binding: In the directive, use the & binding in the scope property of the directive definition to pass the function to the directive.
3. Invoke the Function from the Directive: Inside the directive, the function will be available in the scope, and you can invoke it as needed.

Example: Passing Functions to Custom Directives

Step 1: Define the Parent Controller and Function

In the parent controller, we define a function called onButtonClick that will be passed to the custom directive.

angular.module('app', [])
  .controller('MainController', function($scope) {
    // Function in the parent controller
    $scope.onButtonClick = function() {
      alert("Button clicked!");
    };
  });

Step 2: Define the Custom Directive

In the directive, use the & binding to allow the function to be passed from the parent scope.

angular.module('app')
  .directive('buttonDirective', function() {
    return {
      restrict: 'E',
      scope: {
        // Use '&' to bind the function from the parent controller
        onClick: '&'
      },
      template: '<button ng-click="onClick()">Click Me!</button>',
      link: function(scope, element, attrs) {
        // You can call the function when needed
        element.on('click', function() {
          scope.onClick();  // This invokes the function passed from the parent
        });
      }
    };
  });

• The onClick binding in the directive’s scope is an expression passed from the parent. The & symbol in the scope property allows the directive to access the function from the parent scope and invoke it.
• Inside the link function, scope.onClick() is called when the button is clicked.

Step 3: Use the Directive in the HTML

Now, use the custom directive in your HTML and pass the function from the controller.

<div ng-app="app" ng-controller="MainController">
  <button-directive on-click="onButtonClick()"></button-directive>
</div>

• The on-click attribute binds the onButtonClick() function from the parent scope (i.e., the MainController) to the directive.

Explanation of the Process:

1. Parent Controller: We define a function (onButtonClick()) in the parent controller’s $scope. This function is passed to the custom directive.
2. Directive Definition:
   • In the directive’s scope property, we use the & binding for the onClick property. This tells AngularJS that the value of onClick is an expression (in this case, a function) passed from the parent.
   • The template of the directive contains a button with an ng-click directive. This binds the button’s click event to the onClick() function passed to the directive.
   • In the link function, we can access the function via scope.onClick(), and when the button is clicked, the function from the parent scope is invoked.

Step 4: Testing the Example

When the user clicks the button rendered by the buttonDirective, it will trigger the onButtonClick() function from the parent controller, which will show an alert with the message “Button clicked!”.

Example: Passing Functions with Parameters

You can also pass functions with parameters. Let’s modify the example so that the function in the parent controller takes a parameter.

Step 1: Modify the Parent Controller

In the parent controller, modify the onButtonClick function to accept a parameter.

angular.module('app', [])
  .controller('MainController', function($scope) {
    // Function that accepts a parameter
    $scope.onButtonClick = function(message) {
      alert("Button clicked! Message: " + message);
    };
  });

Step 2: Modify the Directive to Pass Parameters

Pass the parameter to the function inside the directive.

angular.module('app')
  .directive('buttonDirective', function() {
    return {
      restrict: 'E',
      scope: {
        // Pass the function as an expression
        onClick: '&'
      },
      template: '<button ng-click="onClick({message: \'Hello from Directive\'})">Click Me!</button>',
      link: function(scope, element, attrs) {
        // The function will be invoked with the specified parameter when the button is clicked
        element.on('click', function() {
          // Pass the message parameter when invoking the function
          scope.onClick({message: 'Hello from Directive'});  // Pass parameter to the function
        });
      }
    };
  });

• In the ng-click directive inside the template, we pass the message parameter as an object: onClick({message: 'Hello from Directive'}).
• The function passed from the parent will receive this message object as an argument.

Step 3: Use the Directive in the HTML

<div ng-app="app" ng-controller="MainController">
  <button-directive on-click="onButtonClick(message)"></button-directive>
</div>

• Here, we pass onButtonClick(message) to the buttonDirective, where message is the parameter that will be passed to the function when invoked.

Explanation:

• When the user clicks the button in the directive, the function onButtonClick() is invoked in the parent controller.
• The message parameter is passed to the function and displayed in the alert.