来自 http://techlogs.cn/angular-bi-jiao-chang-yong-de-zhi-ling/
已经用了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") {
var selected =
false;
var time =
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(
'focus click',
function (e) {
scope.$apply(attrs.clickInside);
e.stopPropagation();
});
}
};
}]);
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(
'focus click',
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 () {
return function (scope, element, attrs) {
var dereg = scope.$watch(attrs.conditionFocus,
function (newValue) {
if (newValue) {
element.focus();
}
});
element.bind(
"$destroy",
function () {
if (dereg) {
dereg();
}
});
};
}]);
angular.module(
'my.directives').directive(
"scrollToHide", [
function () {
return function (scope, element, attrs) {
var height=
parseFloat(attrs.maxHeight)
$(
window).scroll(
function(){
var scrollTop=
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) {
return function (scope, element, 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值设为空字符串。
angular.module(
'my.directives').directive(
"resetToEmptyString", [
"$parse",
function ($parse) {
return function (scope, element, 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属性）
angular.module(
'my.directives').directive(
"numberOnly", [
"$parse",
function ($parse) {
return function (scope, element, attrs) {
element.bind(
"keyup",
function () {
if(event.keyCode==
37||event.keyCode==
39){
return false;
}
var val = 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);
}
return false;
});
element.bind(
"afterpaste",
function () {
var val = 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);
}
return false;
});
};
}]);
11. upperCaseOnly 输入框自动转换成大写
angular.module(
'my.directives').directive(
"upperCaseOnly", [
"$parse",
function ($parse) {
return function (scope, element, attrs) {
element.bind(
"keyup",
function () {
var val = element.val().toUpperCase();
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope, val);
}
return false;
});
element.bind(
"afterpaste",
function () {
var val =element.val().toUpperCase();
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope, val);
}
return false;
});
};
}]);
12. noSpecialString 输入框内容不能为特殊字符
angular.module(
'my.directives').directive(
"noSpecialString", [
"$parse",
function ($parse) {
return function (scope, element, attrs) {
element.bind(
"keyup",
function () {
var val = element.val().replace(/[\W]/g,
'');
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,
'');
element.val(val);
if (attrs.ngModel) {
$parse(attrs.ngModel).assign(scope, val);
}
return false;
});
};
}]);
13. round2bit 输入框失去焦点 保留两位小数
angular.module(
'my.directives').directive(
"round2bit", [
'$parse',
'$filter',
function ($parse, $filter) {
return function ($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.SelfHeight dom编译期设置元素高度，可以接受数字或者表达式
angular.module(
'hr.directives').directive(
'SelfHeight', [
'$timeout',
function ($timeout) {
function _resizeElement(element, SelfHeight) {
element.height((
typeof SelfHeight ===
"number") ? SelfHeight :
eval(SelfHeight));
};
return {
priority:
1000,
link:
function (scope, element, 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);
}
}
};
}]);
