Why would you put a controller in a directive with AngularJS?

Question

I recently saw this example. It's the first time I have seen a controller inside a directive. Is this a normal thing to do. I thought you were supposed to keep these two in different areas for testability:

myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
})

The `tabs` directive on the Angular home page (see Create Components, components.js tab) has a controller so that the `pane` directive can get access to the tabs' $scope (for more on this see http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers/14168699#14168699). See also [Difference between controller and link functions in a directive](http://stackoverflow.com/questions/12546945/difference-between-the-controller-and-link-functions-when-defining-an-angula/12570008#12570008). — Mark Rajcok, Apr 06 '13 at 16:07

score 5 · Accepted Answer · answered Apr 06 '13 at 12:59

5

Generally, you'd use controllers in directives to be able to share them between directives, on an element. It allows for directives to comunicate between them easily.

See here for a great explanation of how this works: http://egghead.io/video/angularjs-directive-to-directive-communication/

answered Apr 06 '13 at 12:59

Tiago Roldão

10,629
3
29
28

Thanks, this video was clearly enlighting. One more powerful thing learned about AngularJS. Most amazing JS framework, love it! – kfis Apr 06 '13 at 17:11
@kfis the whole series is amazing, did me a great deal! – Tiago Roldão Apr 07 '13 at 13:25

Why would you put a controller in a directive with AngularJS?

1 Answers1