在AngularFire

Question

我的代码有以下简化版本：

tr(ng-repeat='entry in ds3.entries | orderBy:orderByField:reverseSort | filter:query as results')        
    td
      input.screen(type='datetime-local', ng-model='entry.date_received', datetime="MM/dd/yyyy hh:mm a" )
      span(ng-hide='') {{entry.date_received | dateFormat }}
tr.screen
    td
      input.screen(type='datetime-local', ng-model='new_entry.date_received', datetime="MM/dd/yyyy hh:mm a", date-parser="MM/dd/yyyy hh:mm a")
    td
      button.btn-xs.btn-success(ng-click='insert()')
        span.fa.fa-plus-square
        |   Insert

这是HTML视图的Jade部分，允许添加新的日期时间本地数据和更新直播（如GoogleDocs Excel表格）。

我正在尝试使用AngularFire（AngularJS 1.x和Firebase数据库）连接。我已经能够使用Auth和文本输入字段。问题是我们知道Firebase不接受DATETIME值。因此，我正在尝试使用三向数据绑定为一个集合，为实时，实时更改和编辑日期时间输入选择替代方案和解决方案。

我的 计划 是将日期时间作为整数字符串（unix_timestamp）发送到Firebase，并反馈为日期时间格式< / strong>即可。所以，我尝试了2个指令。

1-过滤视图的整数字符串的显示结果。

angular.module('workspaceApp')
.filter('dateFormat', ['$moment', function($moment) {
    return function(time) {
      return time ? $moment.unix(time).format('MM/DD/YYYY - hh:mm a') : time;
    };
}])

2-（艰难的） - 将整数字符串转换并保存到Firebase数据库而不会在视图上显示错误（因为事物在3方式数据绑定[概念]中捆绑在一起所以我陷入困境并努力弄清楚如何做得恰到好处）。对于文本字段，我只在输入标记中执行ng-change ='ds3.entries。$ save（entry）'。

.directive("input", function () {
return {
    require: 'ngModel',
    /* scope : {
                   entries : "="
    },*/
    link: function (scope, elem, attr, modelCtrl) {
      if (attr['type'] === 'date' || attr['type'] === 'datetime-local') {
        modelCtrl.$formatters.push(function (modelValue) {
          if (modelValue) {
              return new Date(modelValue * 1000);
          } else {
              return null;
          }
        });
        elem.bind('change', function () {
          scope.$apply(function() {
            var str = elem.val();
            var time = new Date(elem.val());
            var unix_time = Math.floor(time.getTime() / 1000);
            console.log(str, unix_time);
            scope.entries.$save().then(function(ref) {
              ref.key() === scope.entry.$id; // true
            }, function(error) {
              console.log("Error:", error);
            });
            modelCtrl.$setViewValue(unix_time.toString());
            modelCtrl.$render();
            // $scope.entry.update(unix_time.toString());
          });
        });
      }
    }
};

}）

.directive('fetchDate', function(){
return {
  link: function($scope){
    $scope.$watch('date_received', function(newVal, oldVal){
      if (newVal){
        $scope.entry.date_received = Math.floor(newVal / 1000);
        console.log($scope.entry.date_received);
      }
    });
  }
};

}）

我在datetime输入中使用ng-change = UpdateFunction（）并转到指令和控制器来编写函数但尚未解决它。我也试过了$ watch，但通常在控制台中看到未定义的旧日期或新日期。

$scope.$watch('entry.date_received',function(newVal, oldVal){
  console.log(Math.floor(newVal / 1000) , Math.floor(oldVal / 1000));
  // $scope.update(newVal);
});

但很难解决。有什么想法吗？

Answer 1

将其放在您的<input type="date" date-conversion/>上可以处理AngularFire和日期的三向绑定。

app.directive('dateConversion', function () {
return {
    restrict: "A",
    require: "ngModel",
    link(scope, element, attributes, ngModel) {
        ngModel.$formatters.push(value => {
            let output = null;
            if (value) {
                scope.stringValue = value;
            }
            if (value) { output = moment(value).toDate(); }
            return output;
        });

        ngModel.$parsers.push(value => {
            let output = null;
            if (value) { output = moment(value).format(); }
            return output;
        });
    },
}

}）;