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


 

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