码迷,mamicode.com
首页 > Web开发 > 详细

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

时间:2014-11-19 23:43:51      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   使用   sp   java   on   

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了。

<!doctype html>
<html ng-app="datepickerApp">
	<head>
		<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="bootstrap-datepicker/css/datepicker3.css" />
		<script src="jquery/jquery-1.11.1.min.js"></script>
		<script src="angular.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	</head>
	<body>
	  <input type="text" class="datepicker" >
	  <hr>
		<div ng-controller="datepickerController">
			<input type="text" bs-Datepicker ng-model="vm.selectedDate">
			<button ng-click="vm.show($event)">Date SELECT</button>

			<br>
			vm.selectedDate: {{vm.selectedDate}}
		</div>
		
		<script type="text/javascript">
			//bootstrap-datepicker
			var datepicker1 = $(‘.datepicker‘).datepicker()
				.on(‘changeDate‘,function (ev){
					var newDate = new Date(ev.date)					
					datepicker1.hide()

					alert(newDate)
				})
				.data(‘datepicker‘)


			//angular
			var app = angular.module(‘datepickerApp‘, [])
			
			//angular-directive
			app.directive(‘bsDatepicker‘,function(){
				return {
					restrict : ‘EA‘,
					scope:{
            model:"=ngModel"
        	},
					link : function(scope,element,attrs,ctrl){
						var datepicker1 = $(element).datepicker()
							.on(‘changeDate‘,function (ev){
								var newDate = new Date(ev.date)					
								datepicker1.hide()

								alert(newDate)
							})
							.data(‘datepicker‘)
					}
				}
			})

			app.controller(‘datepickerController‘,function ($scope){
				
				var vm = $scope.vm = {
					selectedDate : new Date(),
					setDate : function(date){
						selectedDate = date
					},
					clearDate : function(){
						selectedDate =  null
					},
					show : function($event){
						
					},
					hide : function(){

					}
				}
				

	 



			})

		</script>	
	</body>
</html>

 

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

标签:style   blog   http   io   ar   使用   sp   java   on   

原文地址:http://www.cnblogs.com/Benoly/p/4109460.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!