在开始编码之前,我们必须想好组件的外观和运行方式。例如,我们想在HTML中像下面这样定义datepicker:
<input datepicker ng-model="currentDate" select="updateMyText(date)"></input>
也就是说,我们需要修改Input输入标签,新增一个datepicker属性,然后 给它扩展更多功能(例如使用模型进行数据绑定,以及当选中了日期之后能够获得通知)。那么,我们应该如何实现呢?
我们将会复用现有的控件,也就是jQuery UI提供的datepicker,而不是重新构建一个datepicker。我们只需要把它挂接到AngularJS上,然后启动它所提供的接口。
DatePickerDirective.js
angular.module('myApp.directives',[]) .directive('datepicker', function() { return { //强制AngularJS把指令限定为只支持属性 restrict: 'A', //总是和ng-model配合使用 require:'?ngModel', scope: { //此方法需要与预先定义好,然后传递给视图控制器中的指令 select: '&' //把我们所引用的select函数绑定到右边的作用域中 }, link: function(scope, element, attrs, ngModel) { if(!ngModel) return; var optionsObj = {}; optionsObj.dataFormat = 'mm/dd/yy'; var updateModel = function(dateTxt) { scope.$apply(function() { //调用AngularJS内部的工具更新双向绑定关系 ngModel.$setViewValue(dateTxt); }); }; optionsObj.onSelect = function(dateTxt, picker) { updateModel(dateTxt); if(scope.select) { scope.$apply(function() { scope.select({date: dateTxt}); }); } }; ngModel.$render = function() { //使用AngularJS内部的'binding-specific'变量 element.datepicker('setDate', ngModel.$viewValue || ''); }; element.datepicker(optionsObj); } }; });
我们还来看一看其中一些比较重要的东西。
1.ng-model
我们把一个ng-model属性传递给了指令所关联的函数。通过ng-model(它会托管指令的执行,因为所需要的属性都处于指令定义内部)可以定义,在指令的上下文中,连接到ng-model上的属性和对象应该具有何种行为。这里有两件事性需要注意:
a.ngModel.$setViewValue(dateTxt)
当AngularJS外部发生了某件事情的时候(在这个例子中是指jQuery UI datepicker的onSelect事件),需要调用此函数。这样就可以让AngularJS知道,它应该更新模型了。一般来说,当DOM事件发生的时候会调用它。
b.ngModel.$render
这是ng-model的另一个组成部分。它会告诉Angular,当模型发生变化的时候应该如何刷新视图。在这个例子中,我们只会把jQuery UI的datepicker变化之后的值传递过去。
2.绑定select
我们不会使用属性值进行编写、再根据作用域把它当做字符串来执行(在这种情况下,嵌套的函数和对象不可访问)的方式;而是会使用函数绑定技术(也就是“&”作用域绑定)。这样做在作用域上创建了一个新的函数,叫做select,它有一个参数——一个对象。这个对象中的每一个key都必须与HTML中所指定的参数一致(HTML就是使用指令的地方),key所对应的值将会被传递给函数对应的参数。这样带来的另一个优点是:控制器被解耦合了,它不再需要知道任何与DOM或者指令相关的内容。回调函数只需要执行它的动作,然后给出一些参数,而没有必要知道与数据绑定或刷新相关的内容。
3.调用select
注意,我们把一个optionOjb传递给了datepicker,同时也传递了一个onSelect函数。jQuery UI负责调用onSelect函数,它一般在AngularJS外部的执行上下文中进行调用。当然,在类似onSelect的函数被调用时,AngularJS是毫不知情的,所以我们有责任让AngularJS知道它需要进行何种操作。怎么才能做到这一点呢?使用scope.$apply即可。
现在,我们可以在scope.$apply的外部简单地执行$setViewValue并调用scope.select,然后再调用scope.$apply()。但是,这样一来,在这两个步骤中任何一个里面所发生的异常都会被默默地忽略掉。如果异常发生在scope.$apply函数内部,则它们可以被AngularJS捕获到。
DatePickerController.js
var app = angular.module('myApp', ['myApp.directives']); app.controller('MainCtrl', function($scope) { $scope.myText = 'Not Selected'; $scope.currentDate = ''; $scope.updateMyText = function(date) { $scope.myText = 'Selected'; }; });
以上代码声明了一个控制器,设置了一些作用域变量,然后创建了一个作用域方法(updateMyText),在后面我们会把这个方法绑定到datepicker的on-select事件上。
DatePickerHtml.html
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"></meta> <title>AngularJS Datepicker</title> <script src="jquery/jquery-1.8.3.js"></script> <script src="jquery-ui/js/jquery-ui-1.9.2.js"></script> <script src="angular/angular.js"></script> <link rel="stylesheet" href="jquery-ui/css/custom-theme/jquery-ui-1.9.2.css"></link> <script src="directive/DatePickerDirective.js"></script> <script src="controller/DatePickerController.js"></script> <script src="jquery-ui/js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"></script> </head> <body ng-controller="MainCtrl"> <input id="dateField" datepicker ng-model="$parent.currentDate" select="updateMyText(date)"></input> <br></br> {{myText}} - {{currentDate}} </body> </html>
注意这里是如何指定select属性的。作用域中并没有"date"值,但是由于我们在指令中设置了函数绑定的方式,所以AngularJS知道这个函数将会接受一个名为"date"的参数,它就是当datepicker上的onSelect被调用时我们所指定的对象。
注意一个细节:我们把ng-model设置成了$parent.currentDate,而不是currentDate。这是为什么呢?因为我们的指令将会创建一个独立的作用域,这样就可以用它来绑定select函数了。这就导致了currentDate不再被连接到ng-model上,即使我们专门进行了设置。因此,我们需要明确地告诉AngularJS,它需要引用的currentDate并不在这个独立的作用域中,而是在父作用域中。
通过这种方式,当你把应用加载到浏览器之后,将会看到一个文本框,点击它就会打开一个jQuery UI的datepicker。选择日期之后,屏幕上的文本就会从"Not Selected"更新成"Selected",并加上你所选择的日期。同时,输入框中的日期也会被刷新。如下所示:
资料来源:《用AngularJS开发下一代Web应用》
相关推荐
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
jquery datepicker 能跑通的小例子
jQuery Datepicker用到的js和CSS文件 jquery-ui.css jquery-ui-timepicker-addon.css jquery-1.7.2.js jquery-ui.min.js jquery-ui-timepicker-addon.js jquery-ui-sliderAccess.js jquery-ui-timepicker-zh-CN.js
jquery datepicker
jQuery Datepicker最新demo,包括所有语言包,很好用,也很漂亮。。
jquery datepicker today clear 扩展实现,全网惟一资源。 当时项目要用,在网上没找到现成的,找到的都是需要修改源代码的,自己最后看源码实现的扩展,没有污染源码,如果项目有需要,拿去直接用就行了。 而且日期...
jquery datePicker插件jquery datePicker插件jquery datePicker插件jquery datePicker插件
jQuery datepicker 日历组件 jQuery datepicker 日历组件
jquery datepicker cn en
首先下载了官方的jquery datepicker 控件 然后使用java native 命令汉化了下 使用了addone 插件, 可以带时分秒了
ASP.NET日期控件datepicker的使用方法!
jquery datepicker 日期控件 已汉化,已过滤多余的js,样式,图片,下载可直接运行,支持ie,google,火狐等主流浏览器
jquery datepicker日历控件支持多种颜色弹出日历 jquery datepicker日历控件支持多种颜色弹出日历
jQuery datepicker 日历插件 使用手册
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
angularjs ui-grid datepicker 日期控件 ui-grid 双击弹出时间选择框
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
jquery datepicker 日历显示控件 超牛 满足各种显示要求 请看例子