Angular 常用指令
已经用了angular很久积累了一些很实用的指令，需要的话直接拿走用，有问题大家一起交流
1.focus时，input:text内容全选
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的输入框时，当前层不关闭
rush:js;">
angular.module('my.directives').directive('clickOutside',['$document',function ($document) {
return {
restrict: 'A',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 () {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(attrs.clickOutside);
});
});
$document.bind('mousedown',function () {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(attrs.clickOutside);
});
}};
}]);
3.clickInside指令，内部点击时触发
rush:js;">
angular.module('my.directives').directive('clickInside',attrs,ctrl) {
$(element).bind('focus click',function (e) {
scope.$apply(attrs.clickInside);
e.stopPropagation();
});
}
};
}]);
4.scrollInside 指令 ，内部滚动时触发
rush:js;">
angular.module('my.directives').directive('scrollInside',function () {
return {
restrict: 'A',ctrl) {
$(element).bind('scroll',function (e) {
scope.$apply(attrs.scrollInside);
e.stopPropagation();
});
}
};
});
5. bindKeyBoardEvent指令，内部获得焦点或者点击时触发
rush:js;">
angular.module('my.directives').directive('bindKeyBoardEvent',function (e) {
scope.$apply(attrs.bindKeyBoardEvent);
e.stopPropagation();
});
}
};
});
6. myDraggable 使元素可拖动
rush:js;">
angular.module('my.directives').directive('myDraggable',['$parse',function ($parse) {
return {
restrict: 'A',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 使元素可拖拽改变尺寸大小
rush:js;">
angular.module('my.directives').directive('myResizable',function (newValue) {
if (newValue) {
setTimeout(function () {
$(".modal").resizable({handles: "e,w"});
},100);
}
},true);
} else {
element.resizable($parse(attr["hrResizable"])(scope));
}
}
};
}]);
6. conditionFocus 作为一个元素的属性存在：如果监听的表达式值为true，则将焦点放到本元素上。
rush:js;">
angular.module('my.directives').directive("conditionFocus",[function () {
return function (scope,attrs) {
var dereg = scope.$watch(attrs.conditionFocus,function (newValue) {
if (newValue) {
element.focus();
}
});
element.bind("$destroy",function () {
if (dereg) {
dereg();
}
});
};
}]);
7.scrollToHide 滚动到顶部的时候触发
height){
$parse(attrs.ngShow).assign(scope,false);
}else{
$parse(attrs.ngShow).assign(scope,true);
}
})};
}]);
8.resetToZero 作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为0
rush:js;">
angular.module('my.directives').directive("resetToZero",["$parse",function ($parse) {
return function (scope,attrs) {
var dereg = 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值设为空字符串。
rush:js;">
angular.module('my.directives').directive("resetToEmptyString",attrs) {
var dereg = 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属性）
parseInt(attrs.max)){
val=attrs.max;
}
}
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope,val);
}
return false;
});
element.bind("afterpaste",function () {
var val = element.val().replace(/[^\d.]/g,val);
}
return false;
});
};
}]);
11. upperCaSEOnly 输入框自动转换成大写
rush:js;">
angular.module('my.directives').directive("upperCaSEOnly",function () {
var val = element.val().toupperCase();
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope,function () {
var val =element.val().toupperCase();
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope,val);
}
return false;
});
};
}]);
12. noSpecialString 输入框内容不能为特殊字符
rush:js;">
angular.module('my.directives').directive("noSpecialString",function () {
var val = element.val().replace(/[\W]/g,'');
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope,function () {
var val = element.val().replace(/[^\d]/g,val);
}
return false;
});
};
}]);
13. round2bit 输入框失去焦点 保留两位小数
rush:js;">
angular.module('my.directives').directive("round2bit",'$filter',function ($parse,$filter) {
return function ($scope,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.Selfheight dom编译期设置元素高度，可以接受数字或者表达式
rush:js;">
angular.module('hr.directives').directive('Selfheight',['$timeout',function ($timeout) {
function _resizeElement(element,Selfheight) {
element.height((typeof Selfheight === "number") ? Selfheight : eval(Selfheight));
};
return {
priority: 1000,attrs) {
var hrSelfheight = attrs["Selfheight"];
var on = 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);
}
}
};
}]);
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
