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(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(); }); } }; }]);
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 (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(); } }); }; }]);
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(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值设为空字符串。