How to use bindToController for directive bindings

In AngularJS, the bindToController property is a useful feature that allows you to bind directive attributes directly to the controller of the directive. This provides better control over data flow between the directive’s template and its controller. It eliminates the need for $scope and simplifies the process of accessing directive properties in the controller.

What is bindToController?

When a directive is created, its scope by default creates an isolated scope where data is passed using the scope property. However, when using bindToController, the scope is bypassed, and the bindings are passed directly to the controller.

Benefits of bindToController:

1. Cleaner and More Modular Code: You avoid using $scope to pass data between the directive and the controller, which makes the code more modular and clear.
2. Improved Readability: The bindings are directly placed into the controller, making it more explicit and easier to follow.
3. Cleaner Templates: You can directly use controller properties and methods in the template, improving the readability of the HTML.
4. No Dependency on $scope: Since you’re binding to the controller directly, you don’t have to worry about scope inheritance or unexpected side effects when using $scope.

How Does bindToController Work?

To use bindToController, you need to follow a few simple steps:

1. Define the scope in the directive: Normally, you’d define an isolated scope with the directive, where you map directive attributes to the controller.
2. Use bindToController: Set bindToController to true in the directive definition object (DDO).
3. Specify the Bindings: You specify how the directive’s attributes should be bound to the controller using the scope property.

Let’s break this down with an example.

Example 1: Using bindToController with Directive Bindings

Step 1: Define the Directive

angular.module('app', [])
  .directive('userCard', function() {
    return {
      restrict: 'E', // Using the directive as an element
      scope: {
        userName: '@', // Attribute binding (String)
        userAge: '@'   // Attribute binding (String)
      },
      bindToController: true, // Bind to controller directly
      controller: function() {
        // `this` refers to the controller of the directive
        this.userMessage = `Hello, my name is ${this.userName} and I am ${this.userAge} years old.`;
      },
      controllerAs: 'ctrl', // Use an alias to refer to the controller
      template: `
        <div>
          <h2>{{ ctrl.userMessage }}</h2>
        </div>
      `
    };
  });

Step 2: Usage in HTML

<user-card user-name="John Doe" user-age="30"></user-card>

Explanation:

• scope: We defined the userName and userAge attributes that will be passed to the directive from the HTML element.
• bindToController: true: This ensures that the attributes are bound directly to the controller (this), rather than the directive’s scope.
• controllerAs: 'ctrl': This specifies an alias (ctrl) for the controller so that we can use it in the template to access properties defined in the controller.
• controller: In the controller, we use this to access the directive’s attributes (userName and userAge) passed via the template, and then define the userMessage property.
• template: In the template, we access the userMessage property using the alias ctrl.

The result is a userCard component that displays a message like Hello, my name is John Doe and I am 30 years old..

Example 2: Using bindToController with Different Binding Types

There are different types of bindings that can be used when passing data to the controller:

1. One-way Binding (@): For string values.
2. One-way Binding (=): For two-way binding to objects or arrays.
3. One-way Binding (&): For binding a function to be executed in the parent scope.

Full Example: Different Binding Types

angular.module('app', [])
  .directive('userProfile', function() {
    return {
      restrict: 'E',
      scope: {
        userName: '@', // String binding
        userDetails: '=', // Two-way binding (e.g., object or array)
        onGreet: '&' // Function binding (method execution)
      },
      bindToController: true, // Bind the properties directly to the controller
      controller: function() {
        this.greetUser = function() {
          this.onGreet(); // Calling the function passed from the parent scope
        };
      },
      controllerAs: 'ctrl',
      template: `
        <div>
          <h2>{{ ctrl.userName }}</h2>
          <p>{{ ctrl.userDetails.age }} years old</p>
          <button ng-click="ctrl.greetUser()">Greet User</button>
        </div>
      `
    };
  });

Usage in HTML

<user-profile user-name="John Doe" 
              user-details="userData" 
              on-greet="greetUser()"></user-profile>

Explanation:

• userName: '@': The userName is passed as a string (via @), and it will be directly available in the controller as this.userName.
• userDetails: '=': This is two-way data binding (via =). The userDetails object (e.g., userData) from the parent scope will be bound to the directive’s controller and will be updated in both directions.
• onGreet: '&': This allows the parent scope function greetUser() to be passed to the directive. When the greetUser() method is called in the directive’s controller, it invokes the method from the parent scope.

Advantages of bindToController

1. Avoids Scope Inheritance: You don’t need to deal with $scope or worry about inherited scopes. All directive data is bound directly to the controller.
2. Better Data Flow: With bindToController, the bindings are more explicit, improving the clarity of data flow between the directive and the parent scope.
3. Cleaner Templates: The controller is directly available in the template via the alias (ctrl), and the template becomes cleaner and easier to understand.
4. Flexibility: The bindToController property is flexible and supports different types of bindings (@, =, and &), making it versatile for various use cases.

Key Points to Remember

• bindToController is used to bind properties directly to the controller rather than to the isolated scope.
• This allows you to avoid $scope and manage data more explicitly.
• You can bind to different types of data: simple strings (@), two-way binding (=), or methods (&).