Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

00.混沌前沿

Angular1.x确实是一个学习成本很高的框架。实习开始，前端什么都不知道。工头说有了Angular，我们的弟弟只能用脑袋学习。在此之前，大部分前端的东西都使用jQuery，但是Angular正好和jQuery的思路相反，在开发过程中遇到了很多漏洞。Angular团队也放弃了1.x，开始开发2.0版本，类似React。唉，真是沧海一粟。

01.角度与jQuery

Angular的模块化、解耦的思想确实值得学习，但是和成熟的jQuery插件库相比，Angular还是比较寒酸的。例如，Angular-UI中的日期控件是这样的：

丑的不想要，你也选不到时间。相比之下，jQuery有许多优秀的控件，例如：

这个插件入口：http://xdsoft.net/jqplugins/datetimepicker/

那么问题来了。通常，控件直接将值插入输入/标记，如$('#xx ')。val('xx ')，不会触发ng-change事件，ng-model也不会更新。因此，作者编写了一个Angular自适应指令来实现这种控制的双向绑定。对于其他jQuery插件，类似的思路也可以用于适配。

10.纺织品

下面是一个演示，比较两者的区别，注意右边ng-bind的属性会使用adapter 同步变化

演示门户：jb51.rar xiaozai.jb51.net/201701/yuanma/angular.datetimepicker http://

angular.module('指令'，[])。指令(' datetimepicker '，function(){ return { restrict : ' EA '，//指令的作用域是element或attribute require :' ngmodel '，//控制器是ngmodel link: function (scope，element，attrs，Ctrl) {var unregister=scope。$ watch (function () {//key points，以下细节$ (element)。追加('输入id=' date-'attrs。dateid ' ' style=' border : none；width :100%“value=”ctrl。$ model value ' ')；//模板工作不太好，所以用这种愚蠢的方式来添加输入标记元素。on ('change '，function(){//注册onChange事件，并设置viewvaluescope。$ apply (function () {ctrl。$ setviewvalue ($ ('# date-'attrs。dateid)。val())；});});Element.on ('click '，function () {//click触发器日期框$ ('# date-'attrs.dateid)。datetime picker({ format : attrs . format | | ' y/m/d h : I '，//format onClose : function(){//在关闭日期框时手动触发change事件元素. change()；} });});element . click()；//第一次绑定事件，模拟点击一次，否则，日期框返回ctrl。$modelValue如果能点两次就会出来；}，初始化)；函数initialize(value){ //我们来说说ctrl。$setViewValue(值)；注销()；} } }});在写这个说明书的过程中，我遇到了一个大洞。经过长时间的研究，我意识到当Angular初始化一个ngModel时，它会首先将其值设置为NaN。初始化时，它必须首先调用$watch()来监视真实值何时被设置，然后调用上面的initialize方法来设置视图值。否则，控制器中设置的初始值将变为NaN。

11.缺点

原始插件有许多选项。我只实现了一个基本格式。如果有其他要求，自己改代码。可以使用第三个attrs参数获取属性，然后调用原插件的配置方法实现更复杂的逻辑。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。