接触angular有一段时间了，现在项目中有用到一个时间选择的控件，我就自己写了一个，现在想要进行封装成一个自定义指令，方便使用，也是第一次写指令。样子想要做成
这个样子。
html：
2
508
:
css
.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;
/*background-color: lightgrey;*/
}
.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;
}js:
/**
* @return {string}
*/
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);
}
};封装的时候，我就先一股脑的塞到一个指令里
var appDirectives = angular.module('appDirectives', []);
appDirectives.directive('tltimePicker', function() {
return {
restrict : 'AE',
replace : true,
template:
''+
''+
'
'+
'
'+
''+
' '+
''+
':'+
'
'+
''+
''+
'
'+
''+
'',
link : function(scope,element,attrs) {
/**
* @return {string}
*/
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);
}
};
}
};
});这样在页面使用 是可以实现的，但是现在需要把小时和分钟取出来，提交到后台，所以想加上一个ng-model之类的，但是不知道该怎么办了。。。查阅了好多资料之后，发现还是没有解决问题的，身边也没有对这个擅长的小伙伴，所以才发出来问下大家，有什么思路可以指导下的，麻烦指导指导。我是angular新人，希望大神看到问题觉得太弱鸡的不要太介意。谢谢了
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我看你没规定directive的scope，用的是父scope吧。
因为看不到你的controller,姑且认为是所在的controller的scope，那你的hour和minute应该也在controller的scope中吧，直接从这个scope中获取吧。
然后给你推荐个插件ng-inspector,方便你查看各个scope和其中保存的数据。