これは、私が AngularJS 用に書いた最初のディレクティブです。テキスト入力に挿入された画像の URL が有効かどうかを確認したい。
これは私がこれまでに持っているものです:
angular.module('directives', [])
.directive('imageUrlVerify', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var image = new Image();
scope.$watch(function() {
if (ctrl.$viewValue) {
image.src = ctrl.$viewValue;
if (image.complete) {
scope[attrs.imageValid] = true;
} else {
scope[attrs.imageValid] = false;
}
} else {
scope[attrs.imageValid] = false;
}
});
}
}
})
そして私はそれを使用します:
<input type="text" ng-model="imageUrl" placeholder="Image URL..." data-image-valid="imageOk" image-url-verify>
これは実際に機能していますが、最初の指示として、正しい方法で物事を行っていることを確認したい...
私は何かが欠けていますか?
編集: @ Josh-David-Miller の回答に続いて、私はこれを思いつきました:
angular.module('directives', [])
.directive('imageUrlVerify', function() {
return {
restrict: 'A',
replace: true,
scope: { url: '=', imageValid: '=' },
template: '<input ng-model="url" placeholder="Image URL..."/>',
link: function(scope, element, attrs) {
var image = new Image();
scope.$watch('url', function() {
scope.imageValid = false;
});
element.on( 'blur', function() {
image.src = scope.url;
});
image.onload = function() {
scope.$apply(function() {
scope.imageValid = true;
});
};
image.onerror = function() {
scope.$apply(function() {
scope.imageValid = false;
});
};
}
}
})
次のように使用します。
<input image-url-verify url="imageUrl" image-valid="imageOk" />
それは良く見えますか?他に改善すべき点はありますか?