Question

在我发出我的实际问题之前，有关我想做什么的背景信息。

angular-material的mdDatepicker指令提供了一个很好的GUI来选择日期。但是，作为模型，指令需要一个日期对象。这导致了很多关于时区，JSON序列化等问题。所以我的想法是创建某种包装指令，它将字符串作为模型，将其转换为日期并将其交给mdDatepicker指令。当然，反过来相反：如果用户在mdDatepicker中选择一个日期，它会被序列化为一个字符串，然后交还给分配给包装器指令的模型。

从模型到指令的方式有效，但从指令到模型的监视却不会触发。

这是我的指示：

app.directive("stringDatepicker", function($compile) {

  this.template = '<md-datepicker ng-model="ctrl.date" md-placeholder="{{placeholder}}"></md-datepicker>';

  return {    
    restrict: 'E',
    require: 'stringDatepicker',

    scope: {
      placeholder: '@mdPlaceholder',
      dateString: "=dateString"
    },
    controller: StringDatepickerCtrl,
    controllerAs: 'ctrl',
  template: template,
    link: function(scope, element, attrs, controller) {

    var StringDatepickerCtrl = controller;

    StringDatepickerCtrl.attachChangeListeners();
  }

  };

});

这是我指令的控制者：

function StringDatepickerCtrl($scope)
{

  /** @final {!angular.Scope} */
  this.$scope = $scope;

  /** @type {Date} */
  this.date = null;

  /** @type {string} */
  this.dateString = null;

};
StringDatepickerCtrl.$inject = ["$scope"];

StringDatepickerCtrl.prototype.attachChangeListeners = function() {
  var self = this;

  self.$scope.$watch('dateString', function(event, value) {    
    var dateParts = value.split('-');

    if (dateParts.length < 3)
    {
      self.dateString = "";
      self.date = null;
      throw Error("The ng-model value of <string-datepicker> directive must be a valid date string in the format YYYY-MM-dd, i.e. 2015-12-14 for 14th December 2015." + 
    "You provided " + value + " as input.");
    } 
    self.date = new Date(dateParts[0], (dateParts[1] - 1), dateParts[2]);
  });

  self.$scope.$watch('date', function(event, value) {
    self.dateString = value.getFullYear() + "-" + (value.getMonth()+1) + "-" + value.getDate();
  });

};

这是一个你可以玩的小提琴：https://jsfiddle.net/t5vyync9/3/

任何关于“日期”手表不起作用的想法？或许你们有更好的想法如何解决我的问题？

非常感谢！

使用不同的模型数据类型包装角度指令

0 个答案: