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

本文转自：http://www.cnblogs.com/Benoly/p/4109460.html

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<!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>