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