javascript - angular自定义指令中需要取出部分数据提交到后台，这部分数据怎么取出来？

问题描述

问 题

接触angular有一段时间了，现在项目中有用到一个时间选择的控件，我就自己写了一个，现在想要进行封装成一个自定义指令，方便使用，也是第一次写指令。样子想要做成

这个样子。
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

.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:
            '<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) {
            /**
             * @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);
                }
            };
        }
    };
});

这样在页面使用 <tltime-Picker></tltime-Picker>是可以实现的，但是现在需要把小时和分钟取出来，提交到后台，所以想加上一个ng-model之类的，但是不知道该怎么办了。。。查阅了好多资料之后，发现还是没有解决问题的，身边也没有对这个擅长的小伙伴，所以才发出来问下大家，有什么思路可以指导下的，麻烦指导指导。我是angular新人，希望大神看到问题觉得太弱鸡的不要太介意。谢谢了

解决方案

在昨晚经过对指令基础学习之后，今天早上勉强算是弄出来人生第一个指令了，糙是糙了点，但是能用就可以了。昨天遇到的问题是一直取不到值，其实就是想把小时和分钟单独拿出来给个值来绑定，便于在页面点击下一步之类的时候，可以获取到选择的时间，然后发送给后台，上面的大神说的挺切题的额，就是需要研究下指令的scope。我研究了之后，发现其实写起来并不是很难，需要改动的东西也不是很多，直接在指令中加入

scope:{
            hour:'=',
            minute:'='
        },

然后在页面上使用的时候加上

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

就可以直接在控制器中获取小时和分钟了。我把完整的代码贴一下吧，便于将来有谁会用到。当然，要是代码有问题，希望大家也指出来，让我学习一下。
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angular-timepicker</title>
    <script src="lib/angular/angular.min.js"></script>
    <link rel="stylesheet" href="css/timepicker.css">
    <script src="js/timepicker.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TimepickerDemoCtrl">
    <co-timepicker hour="hour" minute="minute"></co-timepicker>
    <button ng-click="getInfo()">获取时间</button>
</div>
</body>

</html>

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;
    /*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;
}
/* timepicker end */

js:

/**
 * Created by apple on 17/1/11.
 */
var app = angular.module('myApp', []);
app.controller('TimepickerDemoCtrl',function ($scope) {
    $scope.getInfo = function () {
        console.log($scope.hour+':'+$scope.minute);
        alert('当前选择时间为'+$scope.hour+':'+$scope.minute)
    };
});
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);
                }
            };
        }
    }
});

这样写完之后页面的效果是这样的

点击获取时间按钮，可以在控制台获取到时间，也有提示框出来

默认是12：00，点击上下按钮，可以换时间。再点击获取时间按钮，就可以得到你选择的时间了：

这样这个问题算是基本解决。希望看了的小伙伴们要是有疑问或者看到错误可以指正。共同学习！

这篇关于javascript - angular自定义指令中需要取出部分数据提交到后台，这部分数据怎么取出来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！