angular 常用指令.doc

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) var selected = false; var time = parseInt(attrautoselect); 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(); ); $(# + attrsinsideId).bind(mousedown, function (e) e.stopPropagation(); ); $(# + attrsinsideId).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(); ); ;);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(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 (attrmodal != undefined) scope.$watch(attrmodal, 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(attrhrDraggable)(scope); ;);6.myResizable 使元素可拖拽改变尺寸大小angular.module(my.directives).directive(myResizable, $parse, function ($parse) return restrict: A, link: function (scope, element, attr) if (attrmodal != undefined) scope.$watch(attrmodal, function (newValue) if (newValue) setTimeout(function () $(.modal).resizable(handles: e, w); , 100); , true); else element.resizable($parse(attrhrResizable)(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(); ); ;);7.scrollToHide 滚动到顶部的时候触发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(scrollTopheight) $parse(attrs.ngShow).assign(scope, false); else $parse(attrs.ngShow).assign(scope, true); ) ;);8.resetToZero 作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为0angular.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(valparseInt(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(valparseInt(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 (pe, 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(,).