好久没有更新了，最近在做一个前端angularJs项目，内容比较复杂，幸好都不算太难。前两天自己写了个简单的时间选择器，但是水平有限，写的代码量稍微有点大，就想着封装成一个指令，暴露出小时和分钟，以便在控制器中获取到，并且发送到后台。不过，之前虽然一直在写angular，指令也接触到不少，但是一直是在使用别人写好的，自己写还是第一次，就想着，正好利用下这个机会，自己尝试些一个简单点的指令也挺好的。

    这里我还是按照往常习惯一样，先贴github地址，毕竟看那么长的东西也是太累了。angular-timepicker

    效果图如图：

    点击上下小三角可以变换时间，点击获取时间的按钮可以弹出提示框显示选择的时间，并且在控制台中打印出来。其实这些写起来并不是很难，在写指令的时候可能对大多数前端的小伙伴来说都不算难事，不过说实话，一年前左右刚接触angular的时候，其实已经在慕课网上看过大漠清秋讲的angular课程，当时初接触前端，看了他讲的指令，其实也没看懂。昨晚回去又看了一遍他讲的课，发现理解了一点了，正好昨天在写指令的时候遇到一些小问题，今天早上也是迎刃而解了。

    下面我就不废话了，直接写代码了，我把这个指令单独写成一个demo了。所以大家要是想使用的话，只需要下载之后复制粘贴就ok了。

第一步：编写html

    先编写出html来，把基本的页面编写出来：

html

<div class="co-timepicker-box" style="margin-left: 15px"><input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2"><div class="fl wi-timepicker-change-box"><div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div><div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div></div><div class="fl wi-timepicker-maohao">:</div><input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2"><div class="fl wi-timepicker-change-box"><div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div><div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div></div>
</div>

第二步：编写css

css

/* timepicker start */
.co-timepicker-box {float: left;width: 110px;height: 32px;border: 1px solid #cccccc;
}.fl{float: left;
}
.wi-timepicker-timeinput{width: 35px;height: 30px;padding: 0;font-size: 20px;text-align: center;line-height: 30px;border:0;outline: none;
}.wi-timepicker-change-box{width: 15px;height: 30px;border:0;
}
.wi-timepicker-change-time{width: 15px;height: 15px;border: 0;
}
.wi-timepicker-maohao{width: 7px;height: 30px;font-size: 16px;text-align: center;line-height: 30px;
}
.arrow-up{background: url("../img/time-up.png")no-repeat center center;background-size: 14px 6px;
}
.arrow-down{background: url("../img/time-down.png")no-repeat center center;background-size: 14px 6px;
}
/* timepicker end */

第三步：编写js

    页面基本完成。之后就是js编写，js中主要需要注意的是，小时和分钟在个位数的时候前面需要加上0，在小时0往下是23，分钟往下是59，这个需要单独的一个方法。然后就是给小时分钟赋初始值。然后就是点击方法。

js

//转换格式的方法
$scope.PrefixInteger = function (num, n) {return (Array(n).join(0) + num).slice(-n);
};
//时间选择器的处理
if(!$scope.hour){$scope.hour = 12;
}
if(!$scope.minute){$scope.minute = '00';
}
var reg=/^\d+$/;
$scope.timeUp = function (type) {if(type == 1){if(reg.test($scope.hour)){if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <= 23){if($scope.hour == 23){$scope.hour = -1;}$scope.hour = parseInt($scope.hour) + 1;}else {$scope.hour = 12;}}else {$scope.hour = 12;}$scope.hour = $scope.PrefixInteger($scope.hour,2);}else if(type == 2){if(angular.isNumber($scope.minute) || reg.test($scope.minute)){if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=59){if($scope.minute == 59){$scope.minute = -1;}$scope.minute = parseInt($scope.minute) + 1;}else {$scope.minute = 0;}}else {$scope.minute = 0;}$scope.minute = $scope.PrefixInteger($scope.minute,2);}};$scope.timeDown = function (type) {if(type == 1){if(angular.isNumber($scope.hour) || reg.test($scope.hour)){if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <=24){if($scope.hour == 0){$scope.hour = 24;}$scope.hour = parseInt($scope.hour) - 1;}else {$scope.hour = 12;}}else {$scope.hour = 12;}$scope.hour = $scope.PrefixInteger($scope.hour,2)}else  if(type == 2){if(angular.isNumber($scope.minute) || reg.test($scope.minute)){if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=60){if($scope.minute == 0){$scope.minute = 60;}$scope.minute = parseInt($scope.minute) - 1;}else {$scope.minute = 0;}}else {$scope.minute = 0;}$scope.minute = $scope.PrefixInteger($scope.minute,2);}};

    以上就是完成了基本的编写，下面就是要写指令了，需要把上面的东西都添加到指令中。

第四步：编写指令

directive

var app = angular.module('myApp', []);
app.directive("coTimepicker", function() {
return {restrict:'AE',scope:{hour:'=',minute:'='},template:'<div class="co-timepicker-box" style="margin-left: 15px">'+'<input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">' +'<div class="fl wi-timepicker-change-box">' +'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>' +'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>' +'</div>' +'<div class="fl wi-timepicker-maohao">' +':' +'</div>' +'<input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">' +'<div class="fl wi-timepicker-change-box">' +'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>' +'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>' +'</div>'+'</div>',link: function ($scope,element,attrs) {$scope.PrefixInteger = function (num, n) {return (Array(n).join(0) + num).slice(-n);};//--------------------------------------if(!$scope.hour){$scope.hour = 12;}if(!$scope.minute){$scope.minute = '00';}var reg=/^\d+$/;$scope.timeUp = function (type) {if(type == 1){if(reg.test($scope.hour)){if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <= 23){if($scope.hour == 23){$scope.hour = -1;}$scope.hour = parseInt($scope.hour) + 1;}else {$scope.hour = 12;}}else {$scope.hour = 12;}$scope.hour = $scope.PrefixInteger($scope.hour,2);}else if(type == 2){if(angular.isNumber($scope.minute) || reg.test($scope.minute)){if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=59){if($scope.minute == 59){$scope.minute = -1;}$scope.minute = parseInt($scope.minute) + 1;}else {$scope.minute = 0;}}else {$scope.minute = 0;}$scope.minute = $scope.PrefixInteger($scope.minute,2);}};$scope.timeDown = function (type) {if(type == 1){if(angular.isNumber($scope.hour) || reg.test($scope.hour)){if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <=24){if($scope.hour == 0){$scope.hour = 24;}$scope.hour = parseInt($scope.hour) - 1;}else {$scope.hour = 12;}}else {$scope.hour = 12;}$scope.hour = $scope.PrefixInteger($scope.hour,2)}else  if(type == 2){if(angular.isNumber($scope.minute) || reg.test($scope.minute)){if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=60){if($scope.minute == 0){$scope.minute = 60;}$scope.minute = parseInt($scope.minute) - 1;}else {$scope.minute = 0;}}else {$scope.minute = 0;}$scope.minute = $scope.PrefixInteger($scope.minute,2);}};}
}});

第五步：使用指令

    指令写完之后，需要使用的，所以在html上写上指令

<co-timepicker hour="hour" minute="minute"></co-timepicker>

在控制器中可以获取到小时和分钟。同时也是可以在html上写死。在控制器中可以只用使用$scope.hour和$scope.minute来获取小时和分钟。

    其实这样就算是已经编写完成，可以直接使用了，昨天我没有搞清楚指令内作用域scope里面的一些用法，导致没法提取出小时和分钟，晚上研究了之后发现其实不算难，这里我也就不讲一些指令的基础了，毕竟我自己也没有搞太明白。很多时候，基础稍微看下之后，应该直接跟着实例去实践，实践之后才能知道一些光看基础不知道的东西。

    感觉自己写东西还是有点乱，没有说的很清楚。不过大家在github上下载下来一看就能明白了，其实这个指令我个人觉得还有待改进，而且难度也不算高，算是比较简单的额指令了。当初也是没找到合适的第三方才自己写了一个。之后还是会继续学习封装控件做成指令。分享出来给大家看看，指导指导。希望大家看到有问题的直接评论或者私信我给我指正。谢谢