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

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