AngularFire 上的实时、实时 3 种数据绑定日期时间输入 [英] Live, realtime 3 ways data-binding date-time input on AngularFire

问题描述

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

I have the following simplified version of my code:

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 表).

That is the Jade part for HTML view, allowing supposedly adding new datetime-local data and updating it live (like an GoogleDocs Excel table).

我正在尝试使用 AngularFire(AngularJS 1.x 和 Firebase 数据库)连接.我已经能够让 Auth 和文本输入字段工作.问题是我们知道 Firebase 不接受 DATETIME 值.因此，我正在尝试为集合使用三向数据绑定来为实时、实时更改和编辑日期时间输入找出替代方案和变通解决方案.

I'm trying to wire things up using AngularFire (AngularJS 1.x and Firebase database). I had been able to have Auth and things worked for text input field. Problem is as we know Firebase doesn't accept DATETIME value. So, I'm trying to sort out alternatives and workaround solutions for live, realtime changing and editing of datetime input using 3-ways data binding for a collection.

我计划是将日期时间作为整数字符串 (unix_timestamp) 发送到 Firebase 并以日期时间格式.所以，我尝试了 2 个指令.

My planning is to have datetime sent to Firebase as integer string (unix_timestamp) and feed back as a datetime format. So, I try 2 directives.

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

1- to filter display result from integer string for the view.

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)'.

2-(tough one)- to convert and save integer string to Firebase database without showing error on the view (because things tied together in 3-ways data binding [concept] so I'm stucked and struggling at figuring out how to do it properly). For text field, I would only do ng-change='ds3.entries.$save(entry)' in the input tag.

.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);
      }
    });
  }
};

})

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

I went with ng-change=UpdateFunction() in the datetime input and went to directive and controller to write the function but not yet solve it. I tried $watch too but usually see undefined either old date or new date in the console.

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

但很难解决.有什么想法吗?

But hardly get it solved. Any ideas?

推荐答案

把它放在你的 <input type="date" date-conversion/> 将处理与 AngularFire 和日期.

Putting this on your <input type="date" date-conversion/> will handle 3 way binding with AngularFire and dates.

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;
        });
    },
}

});

这篇关于AngularFire 上的实时、实时 3 种数据绑定日期时间输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！