Question

我使用这个指令来设置一些字段（在带有指令的元素中）以使用jQuery的DatePicker。我自己也在ng-repeat块中使用这个指令。

myDirectives.directive('datePickerGroup', function() {
    return {
        link: function (scope, element, attrs) {
            $(element).find('.dateDisplay').datepicker();
        }
    };
});

<div date-picker-group="">
    <!-- Some other stuff -->
    <input ng-model="[some model]" class="dateDisplay" />
</div>

现在，我的数据模型对所有这些日期值使用时间戳。出于显而易见的原因，用户应该看到常规日期格式，而不是时间戳。

所以，我想弄清楚的是一种设置双向数据绑定的方法，其中从模型到视图的绑定使用DatePicker的formatDate（）来显示人类可读的日期，然后在修改时，从视图到模型的绑定使用相同的函数将新的人类可读日期转换为时间戳并将其保存到模型中（在$ scope中）。

到目前为止，我一直在做以下事情：

1）在将模型加载到控制器（例如$ scope.data）之后，创建等效变量，其中我保存人类可读的日期版本并使用它们绑定到视图日期字段。因此，对于$ scope.data.stamps中的时间戳数组，我将创建$ scope.formattedDates。

2）当用户提交更改时，我会浏览这些等效变量，将它们重新格式化为标记并将它们放在模型中所属的位置（即$ scope.data）。

虽然这有效，但它显然不理想，因为它不直接更新模型（而模型的其他部分直接绑定到$ scope.data的部分）。所以我想知道是否有一种方法来设置它以便我绑定到真正的模型变量（上面的例子中的$ scope.data.stamps）并且在双向数据绑定的任一方向上进行这种重新格式化？

提前感谢您的帮助！

Answer 1

考虑使用NgModelController的变体。一方面，您有时间戳和其他日期。它们唯一对应：

app.controller('MainCtrl', function($scope) {
    $scope.timestamp = 1234567890000;
});

app.directive('actsAsDate', function() {
    return {
        require: 'ngModel',
         link: function(scope, element, attrs, modelCtrl) {

           modelCtrl.$formatters.push(function (value) {
             return (new Date(value)).toString();         
           });

           modelCtrl.$parsers.push(function(value) {
            return Date.parse(value);
          });

         }
    }
});

请参阅plunker http://plnkr.co/edit/VDdmKamK8FIvq0Bf6UBv?p=preview

祝AngularJS好运。

使用指令处理双向绑定

1 个答案: