Mastering Web Application

(Rick Simeone) #1
Chapter 8
ngModelCtrl.$setValidity('uniqueEmail', false);
}
});
return viewValue;
}
});
}
};
}]);

We are only checking with the server in the $parser, that is, when the user changes
the input. If the value is updated programmatically, via the model, we assume that
the application business logic ensures that this is a valid e-mail address. For example,
if we are loading an existing user to edit, the e-mail address is valid even though it is
already taken.


Normally, in a validation function you return undefined if the value is not valid.
This prevents the model from being updated with an invalid value. In this case, at
the point of returning, the validation function does not know whether the value is
valid or not. So we return the value any-way and then let the response callback set
the validity later.


We are using the $formatters pipeline to add a function that tracks the original
value that was set in the model. This prevents the validation function from
contacting the server if the user re-enters the original e-mail address, as it would
incorrectly set the e-mail to invalid.


Wrapping the jQueryUI datepicker directive


Sometimes there is a third party widget that is complex enough and it is not worth
writing a pure AngularJS version of it in the short term. You can accelerate your
development by wrapping such as widget in an AngularJS directive but you have
to be careful about how the two libraries would interact.


Here we will look at making a datepicker input directive that wraps the jQueryUI
datepicker widget. The widget exposes the following API that we will use to
integrate into AngularJS, where element is the jQuery wrapper around the element
on which the widget is to be attached.

Free download pdf