Adding properties to Angular directive controller (e.g. FormController)

Question

How can I globally extend the native Angular FormController with additional methods?

For example, I would like my forms to have an additional method setNew() (similar to already existing $setPristine(), etc). Right now I am doing this in each controller but I'd like it available throughout the app without declaring it all over the place.

What do you mean by native Angular FormController? Can you also give some explanation on the custom methods i.e what is their purpose? — Nexus23, Dec 14 '14 at 19:45
check this out: http://stackoverflow.com/questions/16539999/angular-extending-controller — Nexus23, Dec 14 '14 at 20:06
@Nexus23 I saw that but that is about creating a new controller from an existing one - not sure how I would modify the native controllers — cyberwombat, Dec 14 '14 at 20:09
I guess it can be done by a decorator but the idea requires validation. — Gleb Vinnikov, Dec 14 '14 at 20:28

score 2 · Accepted Answer · answered Dec 14 '14 at 20:09

You can define additional behavior for directives by define other directives with the same name. Consequently, it seems you can do this:

angular.module('app', [])
  .directive('ngForm', formControllerDecorator)
  .directive('form', formControllerDecorator);

function formControllerDecorator () {
  return {
    require: 'form',
    link: function ($scope, $element, $attrs, formCtrl) {
      formCtrl.setNew = function () {
        // ...
      };
    }
  };
}

You need to declare two directives in this case, because ngForm is in fact an alias for form.

Pefect! I was building a directive to add to my form but this is much better. — cyberwombat, Dec 14 '14 at 20:11

Adding properties to Angular directive controller (e.g. FormController)

1 Answers1