← Home

AngularJS Controller on Directive

A directive in AngularJS is a great way to encapsulate a bit of behavior. However, a bit of it isn’t all that well-documented… how to specify a controller in a way that won’t break minification.

Here’s how. Easy in retrospect, but a bit different than how you might specify dependencies for the link function.

angular.module('revenueAccounts.revAcctEditor', [])
  .directive('revAcctEditor', [function() {

    return {
      restrict: 'E',
      templateUrl: 'revenueAccounts/revAcctEditor.html',
      replace: false,
      scope: {
        revAcct: '=',
        onSave: '&',
      controller: ['$scope', function($scope) {
        $scope.save = function() {
          $scope.onSave({ revAcct: $scope.revAcct });