背景:angular与jquery类库的协作

  第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了。它灵活的dom操作,让很多web开发人员欲罢不能。再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库。然而,它是否能与angularjs结合呢?

  很多angularjs原教旨主义者对此持否定态度。他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用。任何类似jquery的dom操作,都是不洁的。把所有和界面相关的, 比如dom操作, 都放在directive中, 这样页面中directive而没有代码,跟JSF思想一致。MVVM,DSL,组件化的思想这才是web的趋势。嗯,想法很好,原教旨主义者想法都是这么纯洁。但事实情况是,使用了angularjs我们就离不开jquery。

  众所周知,angularjs里面事实上已经内置了jquery lite.,而且angularjs源码中很多方法直接就是使用jquery方法。例如angularjs的事件绑定机制。既然先知们都在用,我们又何苦不用?组件化的思想没有错,但没必要因此把自己的手脚绑住。唯一要注意的问题是,不要用jquery的代码破坏了angularjs的结构。(原文链接:http://www.angularjs.cn/A0fG)

案例:用angular封装bootstrap官网的时间插件

使用说明:

在原先bootstrap-datetimepicker的html片段上添加 ng-model='timepickerTest' ng-time

代码在github上的存放地址:https://github.com/cynthiawupore/ui-bootstrap-datetimepicker

angularjs封装bootstrap官网的时间插件datetimepicker的更多相关文章

  1. AngularJS系列-翻译官网

    公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...

  2. BootStrap的一个标准框架的内容解释——来源于bootstrap官网

    <!DOCTYPE html><!--HTML5的定义--><html lang="zh-cn"> <head> <meta ...

  3. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  4. 时间插件datetimepicker

    相关datetimepicker用法查看官网http://eonasdan.github.io/bootstrap-datetimepicker/ {% load staticfiles %} < ...

  5. boostrap日期时间插件datetimepicker使用过程的一些问题总结

    1.汉化问题 虽然有转门的汉化脚本,不过如果简单使用的话自己稍微改一下源码就行了: var dates = $.fn.datetimepicker.dates = { en: { days: ['Su ...

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

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

  7. bootstrap日期时间插件datetimepicker

    <!DOCTYPE HTML> 02 <html> 03   <head> 04     <link href="http://netdna.boo ...

  8. Bootstrap官网文档查询

    Ctrl+F 在出现的小搜索框里面输入要查找的东西.回车即可!

  9. 项目中遇到angular时间插件datetinepicker汉化问题

    问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...

随机推荐

  1. java集合框架之Set

    Set集合 元素不可以重复,是无序. 方法与list相同 HashSet:不保证set的迭代顺序,不同步,内部数据结构是哈希表 如果存自定义对象则需要覆盖equals和hashCode方法 先比较ha ...

  2. jsp实现简单的分页

    效果如下:<%-- Document : page Created on : 2014-11-18, 8:55:02 Author : HJZ --%> <%@page conten ...

  3. 【原创】C#玩高频数字彩快3的一点体会

    购彩风险非常高,本人纯属很久以前对数字高频彩的一点研究.目前已经远离数字彩,重点研究足球篮球比赛资料库和赛果预测. 这是一篇在草稿箱保存了1年多的文章,一直没发现,顺便修改修改分享给大家.以后会有更多 ...

  4. 基于TFS实践敏捷-可视化管理

    TFS是基于微软平台一套不错的系统,支持源码管理+运行调试+持续集成+自动化测试+Bug管理+代码评审+任务项管理+文档管理+沟通管理.基于TFS 2015实践看板管理,让团队的数据可视化,让大家更多 ...

  5. [Node.js] Node.js项目的持续集成

    原文地址:http://www.moye.me/2016/03/03/nodejs_ci_by_jenkins 引子 持续集成 (Continuous Integration,简称CI)是一种软件工程 ...

  6. 简单的Linq笔记

    最近带一个新人,被问到Linq的一点东西,回答他后,自己记录下,防止自己懵逼. Linq中查询一个表中指定的几个字段: var ts = t.FindAllItems().Where(P => ...

  7. 在浏览器输入网址到页面加载完毕中间到底发生了什么?(Browser-->Server)

    最近在学习韩老师的php视频,中间有讲到发送请求到服务器返回内容,以前对这个理解并不深刻,虽然以前也知道一部分,这次听了之后收获良多:所以我就画了个流程图,从浏览器输入网址到服务器返回信息,浏览器渲染 ...

  8. [JS] 使用RequireJS引用UMeditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 而UMeditor则是UEditor删减版. ...

  9. JAVA - 优雅的记录日志(log4j实战篇)

    写在前面 项目开发中,记录错误日志有以下好处: 方便调试 便于发现系统运行过程中的错误 存储业务数据,便于后期分析 在java中,记录日志有很多种方式: 自己实现 自己写类,将日志数据,以io操作方式 ...

  10. IOS 回收键盘通用代码

    感觉IOS的键盘回收好累,所以封装了一个通用一点的方法 -(IBAction)spbResignFirstResponder:(id)sender { // NSLogObj(sender); if ...