Angular ngController vs Controller constructed within Directive

Question

I\'m wondering what the use cases are for these two methods of creating a controller:

Using ngController:

myApp.controller(\'myContr         


        

Answer 1

There is a subtle difference between a normal controller ( one created using ng-controller or routes ) and a directive controller.

1. A Directive controller is allowed to inject $element. Note that while currently you can inject $element into a normal controller as well, its bad practice to do so.

2. The sole purpose of a directive controller is for directive to directive communication. A very good use case is show on the main page of AngularJS for tabs component.

A directive controller allows directives to have functions. Because these controller instances can be 'required' in other directives - other directives can communicate / operate on this directive using the controller instance.

The only reason to use a controller with a directive is if you want to do some kind of directive to directive communication. For anything else you should probably stick with writing all your scope logic in the linking function.

Answer 2

The directive controller call each time when the directive is call i mean

<directive id="1"></directive>
<directive id="2"></directive>
<directive id="3"></directive>

The directive controller call 3 time and each has own scope.

And ngController has also same nature . But ngcontroller can also reuse in other directives / html pages .

you can also put ngcontroller in directive (we assume that appCtrl define in any controller.js file)

.directive('directive',function(){
    return{
         scope:{},
         template:"<div>{{hello}}</div>",
         controller:"appCtrl"
    }
})

Answer 3

Adding some detail regarding accessing methods and values within the directive controller:

Parent directive

myApp.directive ( 'parent', [ function() {
    return {
        restrict: 'A',
        scope: {},
        controller: [ '$scope', function( $scope ) {
            //this.myVar = ''; //accessible in child directives
            //$scope.myVar = ''; //accessible in template
            $scope.myVar = this.myVar = '';
        }],
        template: '<div data-child> {{myVar}} </div>',
        link: function( scope, element, attrs ) {

            console.log( scope.myVar );

        }
    };
}]);

Child directive

myApp.directive ( 'child', [ function() {
    return {
        restrict: 'A',
        require: '^parent',
        link: function( scope, element, attrs, ctrl ) {

            console.log( ctrl.myVar );

        }
    };
}]);

Answer 4

The reason to use directive controller is condensed in one sentence:

To create reusable components

Directive controller should contain logic of the component that could be reused. Using directive controller together with isolate scope is the way to create reusable components.

Take a paginator as an example: a paginator needs some logic to notify other component (a grid for example) of the current selected page changed so that the grid can update accordingly. These logic could be written inside directive controller to be reused. When using together with isolate scope, this scope is not tight to application controller'scope and it's easy for you to configure pageSize to bind to any property of the application controller's scope.