Encapsulating third-party jquery plugins

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 does not immediately react to the Model. For example, we use more jQueryUI DatePicker plug-ins, when you select a date, the plugin will fill the date string into the input box. The View changed, but the Model was not updated 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 introduce this directive in HTML.

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

Encapsulating third-party jquery plugins