AngularJS: Two way data binding fails if element has ngModel and a custom directive

Question

I made two directives to setup custom error messages in AngularJS:

errors -> displays the error messages for a form

error-message -> sets up a custom error message on an input

For some reason whenever I add the error-message directive to the element the ng-model binding no longer works (but validation does).

See here http://jsfiddle.net/apohl/A8Vgk/111/

Help please :)

See also http://stackoverflow.com/questions/11896732/ngmodel-and-component-with-isolated-scope — Mark Rajcok, Mar 14 '13 at 21:34
I so appreciate the fact that your title perfectly matched my google search; thanks! — Carl G, Jun 28 '13 at 17:02

score 5 · Accepted Answer · edited May 23 '17 at 11:57

The problem is that your errorMessage directive uses an isolate scope. Isolate scopes affect the entire element, so the ngModel directive was being evaluated in an isolate scope - which obviously can't work - the model is on the parent scope.

I'm not sure why you established an isolate scope here. Since you are trying to create a component that must interact with other directives, an isolate scope is not the best choice. Since errorMessage doesn't affect the current scope, you may not need any defined scope, but you could use a child scope if you so chose.

Take a look here to read more about when to use each type of scope on a directive.

AngularJS: Two way data binding fails if element has ngModel and a custom directive

1 Answers1