Analysis of DOM operation usage in Angularjs _angularjs

The example in this article describes the DOM operational usage in ANGULARJS. Share to everyone for your reference, specific as follows:

The use of Third-party plug-ins in angular is best encapsulated in instructions (directives), and DOM operations are best refactored into instructions.

Avoid using JQuery to manipulate the DOM, including adding element nodes, removing element nodes, getting element content, hiding or displaying elements. You should use directives to implement these actions, and you have to write your own directives if necessary.

If you find it difficult to change your habits, consider removing jQuery from your Web page. Really, the $http service in Angularjs is very powerful, essentially replacing jquery's Ajax functions, and Angularjs embedded a jquery subset of jqlite--'s internal implementations, including common jquery DOM operations, Event bindings, and so on. But that's not to say that you can't use JQuery with Angularjs. If your page is loaded with jquery then Angularjs will take your jquery first, otherwise it will fall back to Jqlite.

The situation where you need to write your own directives is usually when you use a third-party jQuery plugin. Because the plug-in changes the form value outside of ANGULARJS, it is not immediately responsive to Model. For example, we use a lot of jQueryUI DatePicker plug-ins, when you select a date, the plug-in will fill the date string into the input box. View changed, but did not update Model, because $ ('. DatePicker '). DatePicker (); This code is not part of the ANGULARJS management scope. We need to write a directive to get the DOM changes to be updated in the Model immediately.

var directives = Angular.module (' directives ', []);
Directives.directive (' DatePicker ', function () {return
  function (scope, element, attrs) {
    Element.datepicker ( {
      inline:true,
      dateformat: ' dd.mm.yy ',
      onselect:function (datetext) {
        var Modelpath = $ (this). attr (' Ng-model ');
        Putobject (Modelpath, scope, datetext);
        Scope. $apply ();}});

And then introduce this direcitve in HTML.

<input type= "text" DatePicker ng-model= "Myobject.mydatevalue"/>

Plainly directive is in HTML to write custom label attributes, to achieve the role of plug-ins. This declarative syntax extends the HTML.

It is important to note that there is a Angularui project that provides a lot of directive for us to use, including Plug-ins in the Bootstrap framework and other popular UI components based on jQuery. There is also the ngshowcase of http://www.ngnice.com Community contribution. Angularjs's community is active and the ecosystem is sound.

I hope this article will help you to Angularjs program design.