Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular ngController vs Controller constructed within Directive

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

Using ngController:

myApp.controller('myController', ['$scope', function ( $scope ) {

}]);

Constructing the controller within a directive with the controller attribute:

myApp.directive ( 'myDirective', [ '$window', function( $window ) {
    return {
        restrict: 'A',
        controller: [ '$scope', function( $scope ) {

        }],
        link: function( scope, element, attrs ) {

        }
    };
}]);

Is there any reason you wouldn't construct the controller within a directive if they were both invoked on the same element?

Is it simply a question of how widely used / complex the controller is?

like image 545
Patrick Avatar asked Oct 07 '13 13:10

Patrick


People also ask

What is the difference between AngularJS directives and controllers?

A controller is usually used to contain and maintain the logic for your view, which gets bound to your view via $scope. A directive is something that you might use repeatedly and is called in your view directly through the directive name which you can pass in as an attribute.

What is the difference between controller and link in directives?

Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.

What is the difference between the scopes of a directive and the scopes of a controller?

No difference. It is same object.

What is the naming convention of built in directives in angular 2?

Naming Convention: *[name of directive] — Upper camel case is used for the directive class, while lower camel case is used for the directive's name. What sets them apart from other directives in Angular 2: Reshape DOM structure by adding or removing existing DOM elements and do not have templates.


2 Answers

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.

like image 133
Khanh TO Avatar answered Sep 28 '22 06:09

Khanh TO


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.

like image 20
ganaraj Avatar answered Sep 28 '22 08:09

ganaraj