AngularJS image size validation directive

Question

I've written a directive to validate the width and height of an image in AngularJS. I'm not a JS genius but I get along with it. So I would appreciate some feedback on this directives code if this can be done better in the context of Angular and the JS language itself.

angular.module('app').directive('imageFileValidator', ['fileReader', function (fileReader) {
return {
 restrict: 'A',
 require: '^ngModel',
 link: function ($scope, el, attr, ctrl) {
 // Binds the change callback for the element
 el.bind('change', function (e) {
 var file = ((e.srcElement || e.target).files[0]);
 fileReader.getImageSize(file, $scope).then(function(result) {
 var imageSize = result;
 if (attr.validateHeight != undefined) {
 var heightRule = attr.validateHeight.split(' ');
 var validHeight = validateImageSize(imageSize.height, heightRule[0], heightRule[1]);
 ctrl.$setValidity('imageSizeY', validHeight);
 }
 if (attr.validateWidth != undefined) {
 var widthRule = attr.validateWidth.split(' ');
 var validWidth = validateImageSize(imageSize.width, widthRule[0], widthRule[1]);
 ctrl.$setValidity('imageSizeX', validWidth);
 }
 });
 var validateImageSize = function(value1, operator, value2) {
 if (operator == '==') {
 return (value1 == value2);
 }
 if (operator == '>=') {
 return (value1 >= value2);
 }
 if (operator == '>') {
 return (value1 > value2);
 }
 if (operator == '<=') {
 return (value1 <= value2);
 }
 if (operator == '<') {
 return (value1 < value2);
 }
 throw 'Invalid operator ' + operator + ' !';
 };
 });
 }
}
}]);

• Michal Charemza: Can you give an example of how this directive is used?

Answer 1

if (attr.validateHeight != undefined) {
 ...
}
if (attr.validateWidth != undefined) {
 ...
}

The parts != undefined are unnecessary and just add noise to your code; JavaScript automatically checks to see if a conditional is true, or that it is not a false value. And undefined is a false value.

---

throw 'Invalid operator ' + operator + ' !';

Don't just throw a string as an error: create your own error object. I recommend calling it InvalidOperatorError as the reason why the error would be thrown is if an invalid operator was passed into your function.

Here is what the class would look like:

/*
* An error thrown if an invalid operator
* is passed into a function.
*
* @param(string) -- The error message
*/
function InvalidOperatorError(message) {
 this.name = "InvalidOperatorError";
 this.message = message;
}

Notice how I added documentation to this error? You should add this to your function validateImageSize so you can describe what each argument means and what the return means. Also, so you can describe the purpose of the function.

Now, you can use an instance of this class when you are throwing an error. Here is what that will look like:

throw new InvalidOperatorError('Invalid operator ' + operator + ' !');

See? Now you have a descriptive error.