Question

我是棱角分明的新手，我对指令没有多少想法。我需要创建一个指令，它将时间戳作为输入，并以小时：分钟：秒格式显示（在下拉列表中）。如果有人更改了屏幕上的小时，分钟或秒的值，那么时间戳也应该更改。我能够转换时间戳并将其显示为小时，分钟和秒，但是当用户从屏幕更改值时，我无法取回时间戳。

Answer 1

您可以使用日期过滤器实现此目的：

<input type="text" ng-model="dateInput">
{{dateInput | date : 'hh:mm:ss'}}

dateInput模型不会更改，仍然是用户输入的纯时间戳。您可以非常轻松地将数据作为日期与日期过滤器一起显示。（你可以用同样的方式将它附加到下拉列表中）

Answer 2

您可以在指令中使用ng-model的概念。我不确定你是如何将时间戳传递给模型的，但是如果你使用ng-model，那么你在ng-model控制器中推送一个自定义的$ formatter，将你的时间戳转换为小时，分钟和秒（使用适合你的域的任何逻辑））然后在您的视图中呈现相同的内容。要将日期转换回时间戳，您需要推送一个$解析器，它将您的日期时间转换为时间戳。但是，只要用户从屏幕更改值，您就会在viewValue上放置$ watch来触发解析器。我为你创造了一个小提琴手here。

<强>指令

myApp.directive("timeDir", function() {
  return {
    restrict: "A/E",
    template: "Min - <input type='text' ng-model='time.min'></input><br/>Sec - <input type='text' ng-model='time.sec'></input>",
    require: "ngModel",
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.push(function(modelValue) {
        var mins = parseInt(modelValue / 60);
        var secs = modelValue % 60;
        return {
          min: mins,
          sec: secs
        }
      });

      ngModelCtrl.$render = function() {
        scope.time = ngModelCtrl.$viewValue;
      }

      ngModelCtrl.$parsers.push(function(viewValue) {
        var totalSec = parseInt(parseInt(viewValue.min * 60) + parseInt(viewValue.sec));
        return totalSec;
      });

      scope.$watch('time', function() {
        ngModelCtrl.$setViewValue(scope.time);
      }, true);
    }
  }
});

请注意，我已将时间戳转换为min：仅秒。

在angularjs指令

2 个答案: