仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件。在angular bootstrap ui中有一个类似的控件timepicker,但是它并没有深入到分钟和秒的精度。
因此,决定参考它的源码然后自己进行实现。
最终的效果如下:
首先是该directive的定义:
app.directive('minutesecondpicker', function() { return { restrict: 'ea', require: ['minutesecondpicker', '?^ngmodel'], controller: 'minutesecondpickercontroller', replace: true, scope: { validity: '=' }, templateurl: 'partials/directives/minutesecondpicker.html', link: function(scope, element, attrs, ctrls) { var minutesecondpickerctrl = ctrls[0], ngmodelctrl = ctrls[1]; if(ngmodelctrl) { minutesecondpickerctrl.init(ngmodelctrl, element.find('input')); } } }; });
在以上的link函数中,ctrls是一个数组: ctrls[0]是定义在本directive上的controller实例,ctrls[1]是ngmodelctrl,即ng-model对应的controller实例。这个顺序实际上是通过require: ['minutesecondpicker', '?^ngmodel']定义的。
注意到第一个依赖就是directive本身的名字,此时会将该directive中controller声明的对应实例传入。第二个依赖的写法有些奇怪:"?^ngmodel",?的含义是即使没有找到该依赖,也不要抛出异常,即该依赖是一个可选项。^的含义是查找父元素的controller。
然后,定义该directive中用到的一些默认设置,通过constant directive实现:
app.constant('minutesecondpickerconfig', { minutestep: 1, secondstep: 1, readonlyinput: false, mousewheel: true });
紧接着是directive对应的controller,它的声明如下:
app.controller('minutesecondpickercontroller', ['$scope', '$attrs', '$parse', 'minutesecondpickerconfig', function($scope, $attrs, $parse, minutesecondpickerconfig) { ... }]);
在directive的link函数中,调用了此controller的init方法:
this.init = function(ngmodelctrl_, inputs) { ngmodelctrl = ngmodelctrl_; ngmodelctrl.$render = this.render; var minutesinputel = inputs.eq(0), secondsinputel = inputs.eq(1); var mousewheel = angular.isdefined($attrs.mousewheel) ? $scope.$parent.$eval($attrs.mousewheel) : minutesecondpickerconfig.mousewheel; if(mousewheel) { this.setupmousewheelevents(minutesinputel, secondsinputel); } $scope.readonlyinput = angular.isdefined($attrs.readonlyinput) ? $scope.$parent.$eval($attrs.readonlyinput) : minutesecondpickerconfig.readonlyinput; this.setupinputevents(minutesinputel, secondsinputel); };
init方法接受的第二个参数是inputs,在link函数中传入的是:element.find('input')。 所以第一个输入框用来输入分钟,第二个输入框用来输入秒。
然后,检查是否覆盖了mousewheel属性,如果没有覆盖则使用在constant中设置的默认mousewheel,并进行相关设置如下:
// respond on mousewheel spin this.setupmousewheelevents = function(minutesinputel, secondsinputel) { var isscrollingup = function(e) { if(e.originalevent) { e = e.originalevent; } // pick correct delta variable depending on event var delta = (e.wheeldata) ? e.wheeldata : -e.deltay; return (e.detail || delta > 0); }; minutesinputel.bind('mousewheel wheel', function(e) { $scope.$apply((isscrollingup(e)) ? $scope.incrementminutes() : $scope.decrementminutes()); e.preventdefault(); }); secondsinputel.bind('mousewheel wheel', function(e) { $scope.$apply((isscrollingup(e)) ? $scope.incrementseconds() : $scope.decrementseconds()); e.preventdefault(); }); };
init方法最后会对inputs本身进行一些设置:
// respond on direct input this.setupinputevents = function(minutesinputel, secondsinputel) { if($scope.readonlyinput) { $scope.updateminutes = angular.noop; $scope.updateseconds = angular.noop; return; } var invalidate = function(invalidminutes, invalidseconds) { ngmodelctrl.$setviewvalue(null); ngmodelctrl.$setvalidity('time', false); $scope.validity = false; if(angular.isdefined(invalidminutes)) { $scope.invalidminutes = invalidminutes; } if(angular.isdefined(invalidseconds)) { $scope.invalidseconds = invalidseconds; } }; $scope.updateminutes = function() { var minutes = getminutesfromtemplate(); if(angular.isdefined(minutes)) { selected.minutes = minutes; refresh('m'); } else { invalidate(true); } }; minutesinputel.bind('blur', function(e) { if(!$scope.invalidminutes && $scope.minutes < 10) { $scope.$apply(function() { $scope.minutes = pad($scope.minutes); }); } }); $scope.updateseconds = function() { var seconds = getsecondsfromtemplate(); if(angular.isdefined(seconds)) { selected.seconds = seconds; refresh('s'); } else { invalidate(undefined, true); } }; secondsinputel.bind('blur', function(e) { if(!$scope.invalidseconds && $scope.seconds < 10) { $scope.$apply(function() { $scope.seconds = pad($scope.seconds); }); } }); };
此方法中,声明了用于设置输入非法的invalidate函数,它会在scope中暴露一个validity = false属性让页面有机会做出合适的反应。
如果用户使用了一个变量来表示minutestep或者secondstep,那么还需要设置相应的watchers:
var minutestep = minutesecondpickerconfig.minutestep; if($attrs.minutestep) { $scope.parent.$watch($parse($attrs.minutestep), function(value) { minutestep = parseint(value, 10); }); } var secondstep = minutesecondpickerconfig.secondstep; if($attrs.secondstep) { $scope.parent.$watch($parse($attrs.secondstep), function(value) { secondstep = parseint(value, 10); }); }
完整的directive实现代码如下:
var app = angular.module("minutesecondpickerdemo"); app.directive('minutesecondpicker', function() { return { restrict: 'ea', require: ['minutesecondpicker', '?^ngmodel'], controller: 'minutesecondpickercontroller', replace: true, scope: { validity: '=' }, templateurl: 'partials/directives/minutesecondpicker.html', link: function(scope, element, attrs, ctrls) { var minutesecondpickerctrl = ctrls[0], ngmodelctrl = ctrls[1]; if(ngmodelctrl) { minutesecondpickerctrl.init(ngmodelctrl, element.find('input')); } } }; }); app.constant('minutesecondpickerconfig', { minutestep: 1, secondstep: 1, readonlyinput: false, mousewheel: true }); app.controller('minutesecondpickercontroller', ['$scope', '$attrs', '$parse', 'minutesecondpickerconfig', function($scope, $attrs, $parse, minutesecondpickerconfig) { var selected = { minutes: 0, seconds: 0 }, ngmodelctrl = { $setviewvalue: angular.noop }; this.init = function(ngmodelctrl_, inputs) { ngmodelctrl = ngmodelctrl_; ngmodelctrl.$render = this.render; var minutesinputel = inputs.eq(0), secondsinputel = inputs.eq(1); var mousewheel = angular.isdefined($attrs.mousewheel) ? $scope.$parent.$eval($attrs.mousewheel) : minutesecondpickerconfig.mousewheel; if(mousewheel) { this.setupmousewheelevents(minutesinputel, secondsinputel); } $scope.readonlyinput = angular.isdefined($attrs.readonlyinput) ? $scope.$parent.$eval($attrs.readonlyinput) : minutesecondpickerconfig.readonlyinput; this.setupinputevents(minutesinputel, secondsinputel); }; var minutestep = minutesecondpickerconfig.minutestep; if($attrs.minutestep) { $scope.parent.$watch($parse($attrs.minutestep), function(value) { minutestep = parseint(value, 10); }); } var secondstep = minutesecondpickerconfig.secondstep; if($attrs.secondstep) { $scope.parent.$watch($parse($attrs.secondstep), function(value) { secondstep = parseint(value, 10); }); } // respond on mousewheel spin this.setupmousewheelevents = function(minutesinputel, secondsinputel) { var isscrollingup = function(e) { if(e.originalevent) { e = e.originalevent; } // pick correct delta variable depending on event var delta = (e.wheeldata) ? e.wheeldata : -e.deltay; return (e.detail || delta > 0); }; minutesinputel.bind('mousewheel wheel', function(e) { $scope.$apply((isscrollingup(e)) ? $scope.incrementminutes() : $scope.decrementminutes()); e.preventdefault(); }); secondsinputel.bind('mousewheel wheel', function(e) { $scope.$apply((isscrollingup(e)) ? $scope.incrementseconds() : $scope.decrementseconds()); e.preventdefault(); }); }; // respond on direct input this.setupinputevents = function(minutesinputel, secondsinputel) { if($scope.readonlyinput) { $scope.updateminutes = angular.noop; $scope.updateseconds = angular.noop; return; } var invalidate = function(invalidminutes, invalidseconds) { ngmodelctrl.$setviewvalue(null); ngmodelctrl.$setvalidity('time', false); $scope.validity = false; if(angular.isdefined(invalidminutes)) { $scope.invalidminutes = invalidminutes; } if(angular.isdefined(invalidseconds)) { $scope.invalidseconds = invalidseconds; } }; $scope.updateminutes = function() { var minutes = getminutesfromtemplate(); if(angular.isdefined(minutes)) { selected.minutes = minutes; refresh('m'); } else { invalidate(true); } }; minutesinputel.bind('blur', function(e) { if(!$scope.invalidminutes && $scope.minutes < 10) { $scope.$apply(function() { $scope.minutes = pad($scope.minutes); }); } }); $scope.updateseconds = function() { var seconds = getsecondsfromtemplate(); if(angular.isdefined(seconds)) { selected.seconds = seconds; refresh('s'); } else { invalidate(undefined, true); } }; secondsinputel.bind('blur', function(e) { if(!$scope.invalidseconds && $scope.seconds < 10) { $scope.$apply(function() { $scope.seconds = pad($scope.seconds); }); } }); }; this.render = function() { var time = ngmodelctrl.$modelvalue ? { minutes: ngmodelctrl.$modelvalue.minutes, seconds: ngmodelctrl.$modelvalue.seconds } : null; // adjust the time for invalid value at first time if(time.minutes < 0) { time.minutes = 0; } if(time.seconds < 0) { time.seconds = 0; } var totalseconds = time.minutes * 60 + time.seconds; time = { minutes: math.floor(totalseconds / 60), seconds: totalseconds % 60 }; if(time) { selected = time; makevalid(); updatetemplate(); } }; // call internally when the model is valid function refresh(keyboardchange) { makevalid(); ngmodelctrl.$setviewvalue({ minutes: selected.minutes, seconds: selected.seconds }); updatetemplate(keyboardchange); } function makevalid() { ngmodelctrl.$setvalidity('time', true); $scope.validity = true; $scope.invalidminutes = false; $scope.invalidseconds = false; } function updatetemplate(keyboardchange) { var minutes = selected.minutes, seconds = selected.seconds; $scope.minutes = keyboardchange === 'm' ? minutes : pad(minutes); $scope.seconds = keyboardchange === 's' ? seconds : pad(seconds); } function pad(value) { return ( angular.isdefined(value) && value.tostring().length < 2 ) ? '0' + value : value; } function getminutesfromtemplate() { var minutes = parseint($scope.minutes, 10); return (minutes >= 0) ? minutes : undefined; } function getsecondsfromtemplate() { var seconds = parseint($scope.seconds, 10); if(seconds >= 60) { seconds = 59; } return (seconds >= 0) ? seconds : undefined; } $scope.incrementminutes = function() { addseconds(minutestep * 60); }; $scope.decrementminutes = function() { addseconds(-minutestep * 60); }; $scope.incrementseconds = function() { addseconds(secondstep); }; $scope.decrementseconds = function() { addseconds(-secondstep); }; function addseconds(seconds) { var newseconds = selected.minutes * 60 + selected.seconds + seconds; if(newseconds < 0) { newseconds = 0; } selected = { minutes: math.floor(newseconds / 60), seconds: newseconds % 60 }; refresh(); } $scope.previewtime = function(minutes, seconds) { var totalseconds = parseint(minutes, 10) * 60 + parseint(seconds, 10), hh = pad(math.floor(totalseconds / 3600)), mm = pad(minutes % 60), ss = pad(seconds); return hh + ':' + mm + ':' + ss; }; }]);
对应的template实现:
<table> <tbody> <tr class="text-center"> <td> <a ng-click="incrementminutes()" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-up"></span> </a> </td> <td> </td> <td> <a ng-click="incrementseconds()" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-up"></span> </a> </td> <td> </td> </tr> <tr> <td style="width:50px;" class="form-group" ng-class="{'has-error': invalidminutes}"> <input type="text" ng-model="minutes" ng-change="updateminutes()" class="form-control text-center" ng-mousewheel="incrementminutes()" ng-readonly="readonlyinput" maxlength="3"> </td> <td>:</td> <td style="width:50px;" class="form-group" ng-class="{'has-error': invalidseconds}"> <input type="text" ng-model="seconds" ng-change="updateseconds()" class="form-control text-center" ng-mousewheel="incrementseconds()" ng-readonly="readonlyinput" maxlength="2"> <td> <!-- preview column --> <td> <span class="label label-primary" ng-show="validity"> {{ previewtime(minutes, seconds) }} </span> </td> </tr> <tr class="text-center"> <td> <a ng-click="decrementminutes()" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </td> <td> </td> <td> <a ng-click="decrementseconds()" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </td> <td> </td> </tr> </tbody> </table>
测试代码(即前面截图dialog的源代码):
<div class="modal-header"> <h3 class="modal-title">highlight on <span class="label label-primary">{{ moviename }}</span></h3> </div> <div class="modal-body"> <div class="row"> <div id="highlight-start" class="col-xs-6"> <h4>start time:</h4> <minute-second-picker ng-model="starttime" validity="starttimevalidity"></minute-second-picker> </div> <div id="highlight-end" class="col-xs-6"> <h4>end time:</h4> <minute-second-picker ng-model="endtime" validity="endtimevalidity"></minute-second-picker> </div> </div> <div class="row"> <div class="col-xs-2"> tags: </div> <div class="col-xs-10"> <tags model="tags" src="s as s.name for s in sourcetags" options="{ addable: 'true' }"></tags> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()" ng-disabled="!starttimevalidity || !endtimevalidity || durationincorrect(endtime, starttime)">ok</button> <button class="btn btn-warning" ng-click="cancel()">cancel</button> </div>
如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: web安全之机器学习入门——3.2 决策树与随机森林
下一篇: 周末学习笔记