シンプルなものがほとんどですが、今後も使えそうなものもあるので備忘録として載せておきます。
imgタグをsvgに置き換える
svgクラスが付加されたimgタグをsrcに指定されたsvgに置き換えます。CSSの疑似クラスを使ってsvg内の要素に効果を付けたい時などに使えます。(注:jQueryのロードが必要です)
.directive('img2svg', function($http){
return {
restrict: 'EA',
link: function(scope, elm, attrs){
$this = $(elm);
$this.find('img.svg').each(function(){
var $img = $(this);
var imgURL = $img.attr('src');
$http.get(imgURL, {cache:true}).success(function(data) {
var $svg = $(data)[4];
$img.replaceWith($svg);
}, 'xml');
});
}
}
})
サンプル:
<div img2svg>
<img class="svg" src="hoge.svg">
<img class="svg" src="piyo.svg">
</div>特定のイベントを受け取った時に要素にフォーカスを移す
属性値に指定したイベントを要素が受け取った時にフォーカスを移します。
.directive('focusOnEvent', ['$timeout', function($timeout) {
return {
restrict:'A',
link: function(scope, element, attrs) {
scope.$on(attrs.ngFocusOnEvent, function(){
$timeout(function() {
element[0].focus();
});
});
}
};
}])
サンプル:
HTML
<body ng-app="sample" ng-controller="SampleCtrl as sample">
<button ng-click="sample.trigger('btnClicked')">フォーカスを移す</button>
<input type="text" ng-focus-on-event="btnClicked">
</body>
Controller
.controller('SampleCtrl', ['$scope', function($scope){
this.trigger = function(event){
$scope.$broadcast(event);
}
}]);
指定した値(モデル)と同じ値を持たないかチェック
バリデーション用のディレクティブです。ディレクティブを付与した要素のモデルの値とディレクティブで指定したモデルの値が一致しないかチェックします。
.directive('notSame', function(){
return {
require: 'ngModel',
link: function(scope, $element, attrs, ctrl){
var validator = function(viewValue) {
var targetVal = scope.$eval(attrs.notSame);
if(!viewValue) return viewValue;
if(viewValue == targetVal){
ctrl.$setValidity('notSame', false);
return viewValue;
}else{
ctrl.$setValidity('notSame', true);
return viewValue;
}
}
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
}
})
サンプル:
<div ng-form="form" ng-init="text1='hoge'; text2='hoge'">
<input type="text" ng-model="text2" not-same="text1" name="textInput2">
<span ng-show="form.textInput2.$error.notSame">エラー</span>
<input type="text" ng-model="text3" not-same="'piyo'" name="textInput3">
<span ng-show="form.textInput3.$error.notSame">エラー</span>
</div>指定した値(モデル)以上かチェック
バリデーション用のディレクティブです。ディレクティブを付与した要素のモデルの値が指定した値以上かチェックします。不等号を変えれば以下や未満などもできると思います。
.directive('greaterEqual', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, $element, attrs, ctrl){
var validate = function(viewValue) {
var targetVal = scope.$eval(attrs.greaterEqual);
if(viewValue === undefined || viewValue.length == 0) {
ctrl.$setValidity('greaterEqual', true);
return viewValue;
}
if(viewValue < targetVal || !isFinite(viewValue)){
ctrl.$setValidity('greaterEqual', false);
return viewValue;
}else{
ctrl.$setValidity('greaterEqual', true);
return viewValue;
}
};
ctrl.$parsers.unshift(validate);
ctrl.$formatters.unshift(validate);
}
}
})
ブラウザのリサイズ時に何か処理を行う
サイズ変更時にブラウザが発生させるイベントを拾って属性値に指定したイベントハンドラを実行します。また、スコープにイベントを通知します。
.directive('resize', ['$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout){
return {
restrict: 'EA',
scope: {
resize: '&'
},
link: function(scope){
var timer = false;
angular.element($window).on('load resize', function(e){
if(timer) $timeout.cancel(timer);
timer = $timeout(function(){
scope.resize();
}, 200);
});
}
}
}]);
サンプル:
HTML
<body ng-app="sample" ng-controller="SampleCtrl as sample"> <div resize="sample.resizeHandler()"></div> </body>
Controller
.controller('SampleCtrl', ['$scope', function($scope){
this.trigger = function(event){
$scope.$broadcast(event);
}
this.resizeHandler = function(){
alert('リサイズされました');
}
}]);
バリデーションエラーをUI Bootstrapのtooltipに表示させる
以前の記事をご覧ください。
