AngularJS封装jQuery Datepicker

在开始编码之前，我们必须想好组件的外观和运行方式。例如，我们想在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封装jQuery Datepicker

资料来源：《用AngularJS开发下一代Web应用》

AngularJS封装jQuery Datepicker

相关推荐