AngularJS - Controller one a compiled directive

Question

As the name suggests, what is the difference? A controller is suppose to act as a constructor - to instantiate all the variables and/or make API calls.

A directive's controller also runs before the DOM is compiled, and so I am wondering if it could be used for the some context? In other words, are these two codes the same?

Say that I have this markup:

<div my-div ng-controller="DivController">

Here is the Javascript:

angular
    .module('myApp')
    .controller('DivController', function($scope) {
        $scope.value = 'initialize';
    })
    .directive('myDiv', function() {
        return {
            restrict: 'EA',
            link: function(scope, element, attrs) {
                // Now use $scope.value
            }
        }
    });

// VS this code

angular
    .module('myApp')
    .directive('myDiv', function() {
        return {
            restrict: 'EA',
            controller: function($scope) {
                $scope.value = 'initialize';
            },
            link: function(scope, element, attrs) {
                // Now use $scope.value 
            }
        }
    });

Directive controller role is inter directive communication, and expose an API for the directive. Similar to ngModel and ngModelController. Add to that ng-controller creates a new scope. — Chandermani
– Chandermani, Commented Nov 19, 2014 at 3:54
You might find the following question helpful: stackoverflow.com/questions/19225702/… — Brian Lewis
– Brian Lewis, Commented Nov 19, 2014 at 4:25

Tivie · Accepted Answer · 2015-11-05 23:56:14Z

Yes and no!!

Yes because:

both are run pre-compilation
in this case, they produce the same end results

No because:

usually a directive doesn't have its own scope, unless instructed otherwise.
ng-controller has it's own scope and can access its parent scope.
a directive's controller is shared among all instance of the directive (obviously)
related directive controllers (directives which "require" another) can communicate

This is VERY important because it can produce some weird results. For instance, check this snippet (fiddle)

var app = angular.module('myApp', []);

app.directive('myDiv', ['$http',
  function($http) {
    return {
      restrict: 'EA',
      controller: function($scope) {
        $scope.value = 'directive';
      },
      link: function(scope, element, attrs) {}
    };
  }
]);
app.controller('parentCtrl', function($scope) {
  $scope.value = 'Parent Controller';
  $scope.parentvalue = 'wow parent value';
});
app.controller('DivController', function($scope) {
  $scope.value = 'controller';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="parentCtrl">
    <h1>parent scope</h1>
    <br/>parentvalue: <b>{{parentvalue}}</b>
    <br/>value: <b>{{value}}</b>
    <br/>ajaxvalue: <b>{{ajaxvalue}}</b>
    <br/>
    <hr/>
    <div my-div ng-controller="DivController">
      <h1>Controller and directive</h1>
      <br/>parentvalue: <b>{{parentvalue}}</b>
      <br/>value: <b>{{value}}</b>
      <br/>ajaxvalue: <b>{{ajaxvalue}}</b>
      <br/>
    </div>
    <hr/>
    <div my-div>
      <h1>Directive only</h1>
      parentvalue: <b>{{parentvalue}}</b>
      <br/>value: <b>{{value}}</b>
      <br/>ajaxvalue: <b>{{ajaxvalue}}</b>
      <br/>
    </div>
  </div>

As you see the directive overwrite $scope.value of it's parent and sibling. However, if you run an async call and change the parent $scope.value the value gets replaced in the directive but not in the child directive.

Obviously, you can create an isolated scope for the directive.

Collectives™ on Stack Overflow

AngularJS - Controller one a compiled directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related