Angular directive encapsulates jquery datetime plugin DateTimePicker for two-way binding

Source: Internet
Author: User

A holiday on the high-yielding like a sow.

00. The chaotic front-end boundary

Angular1.x really is a high learning cost framework, just beginning internship, front end what also do not understand, Foreman said with angular, we this group of younger brother also can only bite the bullet to learn. Before that, most of the front-end stuff was jquery, and angular was just the opposite of jquery's thinking, and there were a lot of holes in the development process. And the angular team also gave up the 1.x began to develop and react spirit of the 2.0 version, alas, it is really the vicissitudes ah.

01.Angular vs JQuery

Angular modularity and decoupling is really worth learning, but compared to the mature jquery plugin library, Angular is a lot of shabby, for example, Angular-ui in the date control is this:

The ugly don't want, not to choose the time, in contrast jquery has a lot of good controls such as this:

This plug-in Portal: http://xdsoft.net/jqplugins/datetimepicker/

So the problem is that the control is generally directly like this $ ("#xx"). Val ("xx") directly plugs the value into the <input/> tag, which does not trigger the Ng-change event , Ng-model will not be updated , So I wrote a angular adaptation directive, to implement the two-way binding of the control, for other jquery plug-ins, you can also use a similar idea to adapt.

10. Dry Goods

Here is a demo, comparing the differences between the two, note that the right side of the Ng-bind properties using adapter will change synchronously ↓

Demo Portal: http://ydxxwb.sinaapp.com/angularTimePicker/

GitHub Address: Https://github.com/Code2Life/angular.DatetimePicker.git

Angular.module ("directives", []). Directive ("DateTimePicker",function(){    return{restrict:"EA", the//directive is scoped to element or attribute require:"Ngmodel", the//controller is the Ngmodel link for the instruction label:function(scope, element, Attrs, ctrl) {varUnregister = scope. $watch (function() {//Key, detailed below (element). Append ("<input id= ' date-" +attrs.dateid+ "' style= ' border:none;width:100% ' value= '" +ctrl. $modelValue + ">"); The template is not good, so use this stupid method to add the input tag Element.on (' Change ',function() {//Register onchange event, set Viewvalue scope. $apply (function() {Ctrl. $setViewValue ($ ("#date-" +Attrs.dateid). Val ());                });                }); Element.on (' Click ',function() {//click Trigger date box $ ("#date-" +Attrs.dateid). DateTimePicker ({Format:attrs.format | | ' Y/m/d h:i ',//format onClose:function() {//Close date box when manually triggering Change event element.change ();                }                    });                });        Element.click (); First bind the event, simulate the click, otherwise Ken can point two times before the date boxreturnCtrl. $modelValue;            }, initialize); functionInitialize (value) {//below the CTRL. $setViewValue (value);            Unregister (); }        }    }});

Write this command process encountered a big pit, looked for a long time to understand, angular initialization of a ngmodel, it will first give its value to Nan, initialization must first call $watch () to monitor the real value is set, Then call the Initialize method above to set the view value. Otherwise, the initial value set in the controller becomes Nan.

11. Deficiencies

The original plugin is a lot of options, I only implemented a basic format, there are other requirements of the self-code bar. You can use the third attrs parameter to get a property, and then invoke the original plug-in's configuration method to implement more complex logic.

Angular directive encapsulates jquery datetime plugin DateTimePicker for two-way binding

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.