Javascript 在AngularJS指令中创建持续时间输入（mm:ss:ms）_Javascript_Angularjs_Angular Directive

Javascript 在AngularJS指令中创建持续时间输入（mm:ss:ms）

javascript angularjs

Javascript 在AngularJS指令中创建持续时间输入（mm:ss:ms）,javascript,angularjs,angular-directive,Javascript,Angularjs,Angular Directive,我有一个表单，需要用户在其中输入一个持续时间，在资源中，它保存为分钟（或毫秒，易于更改）。我需要指令获取秒/毫秒值，然后为分钟、秒和毫秒创建3个单独的输入然后，用户可以修改每个组件，指令将使用3个组件的秒/毫秒值更新模型我似乎能够获取模型值，创建3个输入，并使用moment.js创建独立的时间组件指令 angular.module('myExampleApp') .directive('lapTimeInput', function () { var tpl = '<d

我有一个表单，需要用户在其中输入一个持续时间，在资源中，它保存为分钟（或毫秒，易于更改）。我需要指令获取秒/毫秒值，然后为分钟、秒和毫秒创建3个单独的输入

然后，用户可以修改每个组件，指令将使用3个组件的秒/毫秒值更新模型

我似乎能够获取模型值，创建3个输入，并使用moment.js创建独立的时间组件

指令

angular.module('myExampleApp')
  .directive('lapTimeInput', function () {
     var tpl = '<div class="lap_time_input"> \
              <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        require: 'ngModel',
        scope: {
        },
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) return;

            scope.$watch(function () {
                return ngModel.$modelValue;
             }, function(newValue) {
                // Using moment.js to extract min, sec & ms parts
                var duration = moment.duration(newValue, 'seconds');
                scope.lap_time = {
                    minutes: duration.minutes(),
                    seconds: duration.seconds(),
                    milliseconds: duration.milliseconds()
                }
             });
        }
    };
  });

HTML

<input type="text" lap-time-input ng-model="lap.lap_time" />

希望这一点会更清楚一些

现在我甚至不确定我在ngModel上使用$watch是否走上了正确的道路，我想不会。据我所知，我需要指令来做3件事：

将元件更换为3个独立的输入，持续分钟、秒和毫秒
使用创建的输入在创建的输入中向用户显示模型值
当用户更改3个输入中的任何一个时，它会更新模型值，将3个单独的值转换回秒/毫秒

即使只是朝正确的方向轻推一下也会有很大的帮助

这就是我设法想到的。答案不准确，但会在路上帮助你

模板

angular.module('myExampleApp')
  .directive('lapTimeInput', function () {
     var tpl = '<div class="lap_time_input"> \
              <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        require: 'ngModel',
        scope: {
        },
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) return;

            scope.$watch(function () {
                return ngModel.$modelValue;
             }, function(newValue) {
                // Using moment.js to extract min, sec & ms parts
                var duration = moment.duration(newValue, 'seconds');
                scope.lap_time = {
                    minutes: duration.minutes(),
                    seconds: duration.seconds(),
                    milliseconds: duration.milliseconds()
                }
             });
        }
    };
  });

更新了模板，并将圈速作为属性传递，通过指令范围检索（参见指令部分）

指令

angular.module('myExampleApp')
  .directive('lapTimeInput', function () {
     var tpl = '<div class="lap_time_input"> \
              <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        require: 'ngModel',
        scope: {
        },
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) return;

            scope.$watch(function () {
                return ngModel.$modelValue;
             }, function(newValue) {
                // Using moment.js to extract min, sec & ms parts
                var duration = moment.duration(newValue, 'seconds');
                scope.lap_time = {
                    minutes: duration.minutes(),
                    seconds: duration.seconds(),
                    milliseconds: duration.milliseconds()
                }
             });
        }
    };
  });

将第二个/毫秒输入字段添加到模板中。您可能不需要它，但出于视觉/调试的原因，我将它放在了那里

angular.module('myExampleApp')
    .directive('lapTimeInput', function () {
    var tpl = '<div class="lap_time_input"> \
              <input ng-model="lapTimeInput" type="number" placeholder="00.00"> \
              <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        scope: {
            lapTimeInput: '='
        },
        link: function (scope) {

            // watch for changes in lapTimeInput and update the lap_time model/object
            scope.$watch('lapTimeInput', function (newValue) {
                var duration = moment.duration(newValue, 'seconds');
                scope.lap_time = {
                    minutes: duration.minutes(),
                    seconds: duration.seconds(),
                    milliseconds: duration.milliseconds()
                }
            });

            // watch for changes in the lap_time model/object
            scope.$watchCollection('lap_time', function (newTime, oldTime) {
                console.log(newTime);
                // convert back to lap time with momentjs here
                scope.lapTimeInput = moment.duration(newTime, 'seconds').asSeconds();

            });
        }
    };
});

angular.module（'myExampleApp'）
.指令（'lapTimeInput'，函数（）{
增值税\
\
\
: \
\
. \
\
';
返回{
限制：“A”，
模板：第三方物流，
替换：正确，
范围：{
lapTimeInput:“=”
},
链接：功能（范围）{
//观察lapTimeInput中的更改并更新lap_时间模型/对象
作用域：$watch（'lapTimeInput'，函数（newValue）{
var duration=时刻持续时间（newValue，'秒'）；
scope.lap_时间={
分钟：持续时间。分钟（），
秒：持续时间。秒（），
毫秒：持续时间。毫秒（）
}
});
//观察搭接时间模型/对象中的更改
范围.$watchCollection（'lap_time'，函数（newTime，oldTime）{
console.log（newTime）；
//在此处使用momentjs转换回圈速
scope.lapTimeInput=moment.duration（newTime，'seconds'）.asSeconds（）；
});
}
};
});

好的，我已经成功地使用ngModel实现了这一点，而无需向控制器添加任何代码，因为我需要在多个位置使用此指令。我还能够做验证标记

angular.module('exampleApp')
.directive('lapTimeInput', function () {
 var tpl = '<div class="lap-time-input"> \
        <div class="input-group"> \
          <span class="input-group-addon"><label for="laps">Lap Time</label></span> \
          <input ng-model="lap_time.minutes" type="number" class="form-control minutes" name="minutes" placeholder="00" min="0" max="15" step="1"> \
        </div> \
        <span class="form-control lap-time-sep">:</span> \
        <input ng-model="lap_time.seconds" type="number" class="form-control seconds" placeholder="00" min="0" max="59" step="1"> \
        <span class="form-control lap-time-sep">.</span> \
        <input ng-model="lap_time.milliseconds" type="number" class="form-control milliseconds" placeholder="000" min="0" max="999" step="1"> \
      </div>';

return {
    restrict: 'A',
            template: tpl,
            replace: true,
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {

                if (!ngModel) return;

                ngModel.$formatters.unshift(function(modelValue) {
                    if(!modelValue) return;

                    var duration = moment.duration(parseInt(modelValue));
                    return {
                        minutes: duration.minutes(),
                        seconds: duration.seconds(),
                        milliseconds: duration.milliseconds()
                    };
                });

                ngModel.$render = function() {
                    scope.lap_time = ngModel.$viewValue
                };

                ngModel.$parsers.unshift(function(modelVal) {           
                    var duration = moment.duration(scope.lap_time);

                  return duration.asMilliseconds();
                });

                ngModel.$validators.check = function(modelValue, viewValue) {           
                    if(viewValue) {
                        if(viewValue.minutes === undefined || viewValue.minutes > 15) {
                            return false;
                        }
                        if(viewValue.seconds === undefined || viewValue.seconds > 59) {
                            return false;
                        }
                        if(viewValue.milliseconds === undefined || viewValue.milliseconds > 999) {
                            return false;
                        }
                    }
                    return true;
                };

                scope.$watchCollection('lap_time', function(newVal) {
                  ngModel.$setViewValue(newVal);
                });

    }
  };
});

angular.module（'exampleApp'）
.指令（'lapTimeInput'，函数（）{
增值税\
\
圈速\
\
\
: \
\
. \
\
';
返回{
限制：“A”，
模板：第三方物流，
替换：正确，
要求：'ngModel'，
链接：功能（范围、元素、属性、模型）{
如果（！ngModel）返回；
ngModel.$formatters.unshift（函数（modelValue）{
如果（！modelValue）返回；
var duration=时刻持续时间（parseInt（modelValue））；
返回{
分钟：持续时间。分钟（），
秒：持续时间。秒（），
毫秒：持续时间。毫秒（）
};
});
ngModel.$render=function（）{
scope.lap_time=ngModel.$viewValue
};
ngModel.$parsers.unshift（函数（modelVal）{
var持续时间=时刻持续时间（范围搭接时间）；
返回持续时间。asmillseconds（）；
});
ngModel.$validators.check=函数（modelValue，viewValue）{
如果（视图值）{
如果（viewValue.minutes==未定义| | viewValue.minutes>15）{
返回false；
}
如果（viewValue.seconds===未定义| | viewValue.seconds>59）{
返回false；
}
如果（viewValue.millides==未定义| | viewValue.millides>999）{
返回false；
}
}
返回true；
};
范围.$watchCollection（'lap_time'，函数（newVal）{
ngModel.$setViewValue（newVal）；
});
}
};
});

如果我这里有什么问题，我当然欢迎反馈

angular.module('exampleApp')
.directive('lapTimeInput', function () {
 var tpl = '<div class="lap-time-input"> \
        <div class="input-group"> \
          <span class="input-group-addon"><label for="laps">Lap Time</label></span> \
          <input ng-model="lap_time.minutes" type="number" class="form-control minutes" name="minutes" placeholder="00" min="0" max="15" step="1"> \
        </div> \
        <span class="form-control lap-time-sep">:</span> \
        <input ng-model="lap_time.seconds" type="number" class="form-control seconds" placeholder="00" min="0" max="59" step="1"> \
        <span class="form-control lap-time-sep">.</span> \
        <input ng-model="lap_time.milliseconds" type="number" class="form-control milliseconds" placeholder="000" min="0" max="999" step="1"> \
      </div>';

return {
    restrict: 'A',
            template: tpl,
            replace: true,
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {

                if (!ngModel) return;

                ngModel.$formatters.unshift(function(modelValue) {
                    if(!modelValue) return;

                    var duration = moment.duration(parseInt(modelValue));
                    return {
                        minutes: duration.minutes(),
                        seconds: duration.seconds(),
                        milliseconds: duration.milliseconds()
                    };
                });

                ngModel.$render = function() {
                    scope.lap_time = ngModel.$viewValue
                };

                ngModel.$parsers.unshift(function(modelVal) {           
                    var duration = moment.duration(scope.lap_time);

                  return duration.asMilliseconds();
                });

                ngModel.$validators.check = function(modelValue, viewValue) {           
                    if(viewValue) {
                        if(viewValue.minutes === undefined || viewValue.minutes > 15) {
                            return false;
                        }
                        if(viewValue.seconds === undefined || viewValue.seconds > 59) {
                            return false;
                        }
                        if(viewValue.milliseconds === undefined || viewValue.milliseconds > 999) {
                            return false;
                        }
                    }
                    return true;
                };

                scope.$watchCollection('lap_time', function(newVal) {
                  ngModel.$setViewValue(newVal);
                });

    }
  };
});