Angular 常用指令实例总结整理
Angular常用指令
已经用了angular很久积累了一些很实用的指令，需要的话直接拿走用，有问题大家一起交流
1.focus时，input:text内容全选
angular.module('my.directives').directive('autoselect',[function(){
return{
restrict:'A',
link:function(scope,element,attr){
if(element.is("input")&&attr.type==="text"){
varselected=false;
vartime=parseInt(attr["autoselect"]);
element.bind("mouseup",function(e){
if(selected){
e.preventDefault();
e.stopPropagation();
}
selected=false;
});
if(time>0){
element.bind("focus",function(event){
setTimeout(function(){
selected=true;
event.target.select();
},time);
});
}else{
element.bind("focus",function(event){
selected=true;
event.target.select();
});
}
}
}
};
}]);
2.clickOutside指令，外部点击时触发,click-outside="func()"func为自己指定的方法，一般为关闭当前层的方法，inside-id=""点击指定id的输入框时，当前层不关闭
angular.module('my.directives').directive('clickOutside',['$document',function($document){
return{
restrict:'A',
link:function(scope,element,attrs){
$(element).bind('mousedown',function(e){
e.preventDefault();
e.stopPropagation();
});
$("#"+attrs["insideId"]).bind('mousedown',function(e){
e.stopPropagation();
});
$("#"+attrs["insideId"]).bind('blur',function(e){
setTimeout(function(){
scope.$apply(attrs.clickOutside);
});
});
$document.bind('mousedown',function(){
scope.$apply(attrs.clickOutside);
});
}
};
}]);
3.clickInside指令，内部点击时触发
angular.module('my.directives').directive('clickInside',['$document',function($document){
return{
restrict:'A',
link:function(scope,element,attrs,ctrl){
$(element).bind('focusclick',function(e){
scope.$apply(attrs.clickInside);
e.stopPropagation();
});
}
};
}]);
4.scrollInside指令，内部滚动时触发
angular.module('my.directives').directive('scrollInside',function(){
return{
restrict:'A',
link:function(scope,element,attrs,ctrl){
$(element).bind('scroll',function(e){
scope.$apply(attrs.scrollInside);
e.stopPropagation();
});
}
};
});
5.bindKeyBoardEvent指令，内部获得焦点或者点击时触发
angular.module('my.directives').directive('bindKeyBoardEvent',function(){
return{
restrict:'A',
link:function(scope,element,attrs,ctrl){
$(element).bind('focusclick',function(e){
scope.$apply(attrs.bindKeyBoardEvent);
e.stopPropagation();
});
}
};
});
6.myDraggable使元素可拖动
angular.module('my.directives').directive('myDraggable',['$parse',function($parse){
return{
restrict:'A',
link:function(scope,element,attr){
if(attr["modal"]!==undefined){
scope.$watch(attr["modal"],function(newValue){
if(newValue){
setTimeout(function(){
$(".modal").draggable({handle:".modal-header"});
},100);
}else{
$(".modal").attr("style","");
}
},true);
$(window).resize(function(){
$(".modal").attr("style","");
});
}else{
element.draggable($parse(attr["hrDraggable"])(scope));
}
}
};
}]);
6.myResizable使元素可拖拽改变尺寸大小
angular.module('my.directives').directive('myResizable',['$parse',function($parse){
return{
restrict:'A',
link:function(scope,element,attr){
if(attr["modal"]!==undefined){
scope.$watch(attr["modal"],function(newValue){
if(newValue){
setTimeout(function(){
$(".modal").resizable({handles:"e,w"});
},100);
}
},true);
}else{
element.resizable($parse(attr["hrResizable"])(scope));
}
}
};
}]);
6.conditionFocus作为一个元素的属性存在：如果监听的表达式值为true，则将焦点放到本元素上。
angular.module('my.directives').directive("conditionFocus",[function(){
returnfunction(scope,element,attrs){
vardereg=scope.$watch(attrs.conditionFocus,function(newValue){
if(newValue){
element.focus();
}
});
element.bind("$destroy",function(){
if(dereg){
dereg();
}
});
};
}]);
7.scrollToHide滚动到顶部的时候触发
angular.module('my.directives').directive("scrollToHide",[function(){
returnfunction(scope,element,attrs){
varheight=parseFloat(attrs.maxHeight)
$(window).scroll(function(){
varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;
if(scrollTop>height){
$parse(attrs.ngShow).assign(scope,false);
}else{
$parse(attrs.ngShow).assign(scope,true);
}
})
};
}]);
8.resetToZero作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为0
angular.module('my.directives').directive("resetToZero",["$parse",function($parse){
returnfunction(scope,element,attrs){
vardereg=scope.$watch(attrs.resetToZero,function(newValue){
if(newValue){
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,0);
}
}
});
element.bind("$destroy",function(){
if(dereg){
dereg();
}
});
};
}]);
9.resetToEmptyString作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为空字符串。
angular.module('my.directives').directive("resetToEmptyString",["$parse",function($parse){
returnfunction(scope,element,attrs){
vardereg=scope.$watch(attrs.resetToEmptyString,function(newValue){
if(newValue){
if(attrs.ngModel){
var_getter=$parse(attrs.ngModel);
if(_getter(scope)){
_getter.assign(scope,"");
}else{
_getter.assign(scope.$parent,"");
}
}
}
});
element.bind("$destroy",function(){
if(dereg){
dereg();
}
});
};
}]);
10.numberOnly输入框内容仅限数值的指令(输入内容不允许为负值),可以设定最大值（max属性）
angular.module('my.directives').directive("numberOnly",["$parse",function($parse){
returnfunction(scope,element,attrs){
element.bind("keyup",function(){
if(event.keyCode==37||event.keyCode==39){
returnfalse;
}
varval=element.val().replace(/[^\d.]/g,'');
if(attrs.max){
if(val>parseInt(attrs.max)){
val=attrs.max;
}
}
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
element.bind("afterpaste",function(){
varval=element.val().replace(/[^\d.]/g,'');
if(attrs.max){
if(val>parseInt(attrs.max)){
val=attrs.max;
}
}
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
};
}]);
11.upperCaseOnly输入框自动转换成大写
angular.module('my.directives').directive("upperCaseOnly",["$parse",function($parse){
returnfunction(scope,element,attrs){
element.bind("keyup",function(){
varval=element.val().toUpperCase();
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
element.bind("afterpaste",function(){
varval=element.val().toUpperCase();
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
};
}]);
12.noSpecialString输入框内容不能为特殊字符
angular.module('my.directives').directive("noSpecialString",["$parse",function($parse){
returnfunction(scope,element,attrs){
element.bind("keyup",function(){
varval=element.val().replace(/[\W]/g,'');
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
element.bind("afterpaste",function(){
varval=element.val().replace(/[^\d]/g,'');
element.val(val);
if(attrs.ngModel){
$parse(attrs.ngModel).assign(scope,val);
}
returnfalse;
});
};
}]);
13.round2bit输入框失去焦点保留两位小数
angular.module('my.directives').directive("round2bit",['$parse','$filter',function($parse,$filter){
returnfunction($scope,element,attrs){
element.blur(function(){
if(attrs.ngModel){
var_getter=$parse(attrs.ngModel);
var_numberStr2Round=(_getter($scope)||0);
_getter.assign($scope,$filter('number')(_numberStr2Round,2).split(",").join(""));
$scope.$apply();
}
});
};
}]);
14.SelfHeightdom编译期设置元素高度，可以接受数字或者表达式
angular.module('hr.directives').directive('SelfHeight',['$timeout',function($timeout){
function_resizeElement(element,SelfHeight){
element.height((typeofSelfHeight==="number")?SelfHeight:eval(SelfHeight));
};
return{
priority:1000,
link:function(scope,element,attrs){
varhrSelfHeight=attrs["SelfHeight"];
varon=attrs["on"];
if(on){
$(window).resize(function(){
_resizeElement(element,scope.$eval(SelfHeight));
});
scope.$watch(on,function(){
$timeout(function(){
_resizeElement(element,scope.$eval(SelfHeight));
},100);
},true);
}else{
$(window).resize(function(){
_resizeElement(element,SelfHeight);
});
_resizeElement(element,SelfHeight);
}
}
};
}]);
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！