Angular Common Instruction Example summary finishing _angularjs

Angular common instructions

has been used for a long time to accumulate a number of very practical instructions, the need for direct use of angular, there are problems with everyone to communicate

1.focus, full selection of input:text content

 Angular.module (' my.directives '). Directive (' autoselect ', [function () {return {rest
        Rict: ' 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 () {s)
              elected = true;
            Event.target.select ();
          }, time);
        });
            else {element.bind ("Focus", function (event) {selected = true;
          Event.target.select ();

        });
}
      }
    }
  };

}]); 

2.clickOutside instruction, external click triggered, click-outside= "func ()" Func for their own methods, generally to close the current layer of methods, inside-id= "" Click on the specified ID of the input box, the current layer does not close

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 command, triggering on internal click

Angular.module (' my.directives '). Directive (' clickinside ', [' $document ', function ($document) {return
  {
    Restrict: ' A ',
    link:function (scope, element, Attrs, ctrl) {
      $ (Element). Bind (' Focus click ', function (e) {
        s Cope. $apply (attrs.clickinside);
        E.stoppropagation ();}
      );
    }
  };

4.scrollInside instruction, triggering when internal scrolling

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 instruction, internal gain focus or click Trigger

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 to make elements drag

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 "});
          else {
            $ ('. Modal '). attr ("Style", "");
          }
        }, True)
        ; $ (window). Resize (function () {
          $ (". Modal"). attr ("Style", "");
        });
      else {
        element.draggable ($parse (attr["hrdraggable"]) (scope);}}}
);

6.myResizable allows elements to drag and drop to change size

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"});
            },
        true);
      else {
        element.resizable ($parse (attr["hrresizable"]) (scope);}}}
);

6. Conditionfocus an attribute of an element exists: if the listener's expression value is true, the focus is placed on this element.

Angular.module (' my.directives '). Directive ("Conditionfocus", [function () {return
  function (scope, element, Attrs {
    var dereg = scope. $watch (Attrs.conditionfocus, function (newvalue) {
      if (newvalue) {
        element.focus (); c5/>}
    });
    Element.bind ("$destroy", function () {
      if (dereg) {
        dereg ();
      }
    })
;

7.scrollToHide scrolling to the top when triggering

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 attributes exist as an element: if the listener's expression value is true, the Ngmodel value bound in this element is set to 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 attributes exist as an element: if the listener's expression value is true, the Ngmodel value bound in this element is set to an empty string.

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

Numberonly the value-only directive for the input box (the input is not allowed to be negative), you can set the maximum (Max property)

 Angular.module (' my.directives '). Directive ("Numberonly", ["$parse", function ($parse) { return function (scope, element, Attrs) {element.bind ("KeyUp", function () {if (event.keycode==37| |
      event.keycode==) {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;
  });
};

}]); 

A. uppercaseonly input box is automatically converted to uppercase

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

nospecialstring input box content cannot be a special character

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

Round2bit input box loses focus and retains two decimal places

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 (attr S.ngmodel);
        var _numberstr2round = (_getter ($scope) | | 0);
        _getter.assign ($scope, $filter (' number ') (_numberstr2round, 2). Split (","). Join (""));
        $scope. $apply ();}}
    );

14.SelfHeight Dom compile-time set element height to accept numbers or expressions

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));
          } );
        }, True);
      else {
        $ (window). Resize (function () {
          _resizeelement (element, selfheight);
        });
        _resizeelement (element, selfheight);
      }}}
  ;
]


 

Thank you for reading, I hope to help you, thank you for your support for this site!