Difference between adding functions to $scope and this in directive controller?

Question

When going through egghead video, the one about Directive to directive communication suggests we use controller to add functions to 'this' object and access it from other directives.

The full code used in the video: Adding functions to this object

The relevant controller code is as follows:

controller: function($scope){
        $scope.abilities = [];
        this.addStrength = function(){
            $scope.abilities.push("Strength");
        }

        this.addSpeed = function(){
            $scope.abilities.push("Speed");
        }

        this.addFlight = function(){
            $scope.abilities.push("Flight");
        }
    },

I was wondering instead of adding functions to 'this' why not add it to the $scope itself especially when we are using isolated scope?

Code adding functions to $scope: Adding functions to $scope

The relevant controller code is as follows:

controller: function($scope){
        $scope.abilities = [];
        $scope.addStrength = function(){
            $scope.abilities.push("Strength");
        };

        $scope.addSpeed = function(){
            $scope.abilities.push("Speed");
        };

        $scope.addFlight = function(){
            $scope.abilities.push("Flight");
        };
    },

Or why have the controller function at all. Why can not we use the link function to achieve the same result?

Adding functions to $scope in the link function: Using link funtciont instead of controller

The relevant controller and link function is as follows:

controller: function($scope){
        $scope.abilities = [];
        $scope.addStrength = function(){
            $scope.abilities.push("Strength");
        };

        $scope.addSpeed = function(){
            $scope.abilities.push("Speed");
        };

        $scope.addFlight = function(){
            $scope.abilities.push("Flight");
        };
    },

I am pretty sure there is valid reason to use controller and this object. I am not able to understand why.

Answer 1

You are correct that you can expose functions in the link function and get the same results. Directive controllers are a bit of an odd bird, but as I've written more complex directives, I've settled on pushing as much behavior into controllers and leaving DOM-related stuff in the link function. The reason why is:

• I can pass in a controller name instead of having the function inside my directive; things get cleaner IMO
• The controllers can expose public APIs used inside of sibling or related directives so you can have some interop and encourage SoC.
• You can isolate the controller testing apart from the directive compilation if you like.

I typically only introduce controllers when there are perhaps complex state transitions, external resources being handled (ie $http), or if reuse is a concern.

You should note that Angular 1.2 exposes 'controllerAs' on directives which allows you to directly consume the controller in directive templates and reduce a bit of the ceremony the $scope composition introduces.