18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

家政服务微信小程序_Angular 常用指令实例总结整

2021-01-12分享 "> 对不起,没有下一图集了!">
Angular 常用指令实例总结整理     投稿:lqh   这篇文章主要介绍了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") {
 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值设为空字符串。

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);

"> 对不起,没有下一图集了!">
在线咨询