[整理]通過AngularJS directive對bootstrap日期控制項的的簡單封裝

標籤：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-datepickervar datepicker1 = $(‘.datepicker‘).datepicker().on(‘changeDate‘,function (ev){var newDate = new Date(ev.date)datepicker1.hide()alert(newDate)}).data(‘datepicker‘)//angularvar app = angular.module(‘datepickerApp‘, [])//angular-directiveapp.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日期控制項的的簡單封裝