Prototyping an Angular Directive

Question

Based on instruction from this question, I have added the following code to my application within the config stage:

$provide.decorator('formDirective', function($delegate) {
  var directive = $delegate[0];
  directive.controller.prototype.inputs = {};
  console.log(directive.controller);
  return $delegate;
});

All I want to do is create another field and a few methods to the existing angular form object. All of that appears to be defined within the formDirective controller but when I prototype new fields and methods into that controller they are not available after my application is completed bootstrapping. Is there something I'm missing, is this even possible without modifying the source?

Thanks in advance!

EDIT Code Pen of Design Patterns Here

http://codepen.io/anon/pen/EadRBo

Works well here: http://codepen.io/jlowcs/pen/gbBKJN . Is that similar to what you are trying to achieve? — jlowcs, Mar 12 '15 at 20:14

richbai90 · Accepted Answer · 2015-03-12T22:27:05.113

Thanks for your help. I did get this working and if your curious, this is why it was so important:

$provide.decorator('formDirective', function($delegate) {
  var directive = $delegate[0];
  directive.controller.prototype.$validate = function () {
    var form = this;
    var p;
    for(p in form) {
      if(form.hasOwnProperty(p) && p.indexOf('$') < 0) {
        form[p].$setTouched();
      }
    }
  };

A simple way to mark every element as touched causing the fields to be invalidated and error logic to kick in. I wanted this when a form was attempted to be submitted so that the user could see all the fields that were required. This also helps to keep my controllers slim without the extra overhead of an additional service.

Prototyping an Angular Directive

1 Answers1