AngularJS directive for validating and figuring out width/height from an image url.
As a component
$ component install hugojosefson/image-url-for-angular@0.0.4
In JS, to let it register its AngularJS module:
require("image-url-for-angular");
With Bower
$ bower install hugojosefson-image-url-for-angular
In HTML:
<script src="bower_components/hugojosefson-image-url-for-angular/index.js"></script>
With npm
$ npm install hugojosefson/image-url-for-angular
In HTML:
<script src="node_modules/image-url-for-angular/index.js"></script>
$ wget https://raw.github.com/hugojosefson/image-url-for-angular/0.0.4/index.js -O image-url-for-angular-0.0.4.js
In HTML:
<script src="image-url-for-angular-0.0.4.js"></script>
One directive is registered, imageUrl, which you use like this:
<form name="myForm">
<input name="screenshotUrl" type="url" ng-model="screenshot.url" image-url
image-url-width-model="screenshot.width" image-url-height-model="screenshot.height" />
...
</form>
Then the following are automatically kept up-to-date in the $scope:
myForm.screenshotUrl.$valid
myForm.screenshotUrl.$invalid
screenshot.width
screenshot.height
The attributes image-url-width-model and image-url-height-model are each optional, but if
any of them is specified, the directive will keep the corresponding scope variable updated with the width/height.
In case of an error, for example if the url is incorrect, or the image loaded is not a valid image, width and height
models are set to null and the form field's validity is set to invalid (specified as
imageUrl.)
If the url should not be part of the validity checking of its form (and by extension its parent form), use can specify
the attribute image-url-integrate-with-form-validity="false" on the <input /> tag. Then it will not set $valid nor
$invalid.
For most cases you can check for a valid image by checking the width and/or height models instead, if you expect images to be > 0 pixels.
MIT