Using bindToController in directives instead of $scope

What is bindToController?

In AngularJS directives, the traditional approach was to use $scope for passing data and handling logic. However, with the introduction of component-based architecture, bindToController allows us to bind data directly to the directive’s controller instead of relying on $scope.

---

1️⃣ Why Use bindToController Instead of $scope?

Better Code Readability → Keeps logic inside the controller instead of polluting $scope.
Encapsulation → The directive’s controller behaves like a class, making it easier to understand.
Component-Based Design → Aligns with AngularJS 1.5+ component-based architecture.
Avoids Scope Issues → Reduces the risk of scope inheritance problems.

---

2️⃣ Old Way: Using $scope in Directives ()

In older versions of AngularJS, we used $scope inside directives:

app.directive('oldDirective', function() {
    return {
        restrict: 'E',
        scope: {
            message: '='
        },
        template: '<p>{{ message }}</p>',
        controller: function($scope) {
            console.log('Message:', $scope.message); // Accessing data via $scope
        }
    };
});

Problems with $scope:

• controller depends on $scope, making it less modular.
• Harder to read, maintain, and debug.
• $scope inheritance can lead to unexpected behavior.

---

3️⃣ Modern Way: Using bindToController ( Recommended)

Instead of $scope, we use bindToController to bind values directly to the controller.

Correct Approach Using bindToController

app.directive('newDirective', function() {
    return {
        restrict: 'E',
        scope: {},
        bindToController: {
            message: '@'
        },
        controllerAs: 'vm',  // Using Controller As syntax
        template: '<p>{{ vm.message }}</p>',
        controller: function() {
            var vm = this;
            console.log('Message:', vm.message); // Accessing data via "this"
        }
    };
});

What’s Changed?

1. No $scope in controller – Everything is inside this.
2. Uses controllerAs: 'vm' – So we refer to the controller as vm.
3. Data binding via bindToController – message is now assigned to this.message inside the controller.

---

4️⃣ Example: Using bindToController with Two-Way Binding

If you need two-way binding (=) in bindToController, do it like this:

app.directive('twoWayDirective', function() {
    return {
        restrict: 'E',
        scope: {},
        bindToController: {
            user: '='
        },
        controllerAs: 'vm',
        template: '<input type="text" ng-model="vm.user.name">',
        controller: function() {
            var vm = this;
            console.log('User:', vm.user); // Access user object directly
        }
    };
});

Explanation:

• The user object is bound to this.user in the controller.
• Changes in the input field update the parent controller’s user object** because of **two-way binding (=`).

---

5️⃣ Using bindToController with Component-Based Design

AngularJS 1.5+ introduced .component(), which replaces directives for reusable UI components.

Instead of a directive, we can write:

app.component('userCard', {
    bindings: {
        user: '='
    },
    template: '<h3>{{ $ctrl.user.name }}</h3>',
    controller: function() {
        console.log(this.user); // Using $ctrl instead of vm
    }
});

Why Use .component()?

• controllerAs is always $ctrl (no need to define controllerAs).
• Simplifies directive creation.
• Recommended for AngularJS 1.5+ applications.

---

6️⃣ When to Use bindToController?

Scenario	Use $scope?	Use bindToController?
Simple directives (no controller)	Yes	No need
Directives with a controller	No	Yes
Component-style development	No	Yes
Avoiding $scope pollution	No	Yes