仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
在一个项目中需要一个用来输入分钟数和秒数的控件，然而调查了一些开源项目后并未发现合适的控件。在Angular Bootstrap UI中有一个类似的控件TimePicker，但是它并没有深入到分钟和秒的精度。
因此，决定参考它的源码然后自己进行实现。
最终的效果如下：
首先是该directive的定义：
app.directive('minuteSecondPicker', function() {
return {
restrict: 'EA',
require: ['minuteSecondPicker', '"color: #800000">注意到第一个依赖就是directive本身的名字，此时会将该directive中controller声明的对应实例传入。第二个依赖的写法有些奇怪：""，"htmlcode">
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) "htmlcode">
// 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) "htmlcode">
// 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', '"htmlcode">
<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="/UploadFiles/2021-04-02/s as s.name for s in sourceTags">
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：学习Angularjs分页指令
下一篇：精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)