Angular 常用指令实例总结整理

2019-11-19 18:31:36

字体：大中小

来源：转载

供稿：网友

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇：jQuery内存泄露解决办法

下一篇：jQuery UI制作选项卡（tabs）