无法弄清楚如何使用 $parsers 和 $formatters 创建指令答案

【问题标题】：Cannot figure out how to create a directive with $parsers and $formatters无法弄清楚如何使用 $parsers 和 $formatters 创建指令
【发布时间】：2013-08-01 14:57:09
【问题描述】：

我想创建一个指令，允许用户以多种格式输入日期。当底层模型发生变化时（无论是通过直接用户输入还是以编程方式），我希望它以标准化格式显示日期。

Google Flights 上的出发和返回日期输入就是这种“在野外”的一个例子。

这是我的代码（根本不起作用）。

查看

<input type="text" ng-model="params.departDate" 
  date-input display-format="{Weekday} {d} {Month}, {yyyy}">

控制器

app.controller('MainCtrl', function($scope) {
  $scope.params = {
      departDate: new Date()
  };
  $scope.isDate = function() {
      return $scope.params.departDate instanceof Date;
  }
});

指令

app.directive("dateInput", function() {
    return {
        require: 'ngModel',
        scope: {
            displayFormat: '@'
        },
        link: function (scope, element, attrs, ngModel) {

            ngModel.$parsers.push(function (viewVal) {
                if (viewVal) {
                    // Using sugar.js for date parsing
                    var parsedValue = Date.create(viewVal);
                    if (parsedValue.isValid()) {
                        ngModel.$setValidity("date", true);
                        return parsedValue;
                    }
                }
                ngModel.$setValidity("date", false);
                return viewVal;
            });

            ngModel.$formatters.unshift(function (modelVal) {
                if (modelVal){
                    // Using sugar.js for date formatting
                    var date = Date.create(modelVal);
                    if (date.isValid()) {
                        return date.format(scope.displayFormat || '{Weekday} {d} {Month}, {yyyy}')
                    }
                }
                return modelVal;
            });
        }
    };
})

这甚至不像我预期的那样工作。我做错了什么？

这是一个 PLUNKR：http://plnkr.co/edit/583yOD6aRhRD8Y2bA5gU?p=preview

【问题讨论】：

ng-model 和隔离范围不能很好地混合：stackoverflow.com/questions/11896732/… 我建议不要在您的指令中创建任何范围，并使用 attrs 访问 display-format 属性：var displayFormat = attrs.displayFormat。
谢谢你1000次！你刚刚为我节省了 500 美元买了一台新显示器，我沮丧地用砖头砸了它。

标签： angularjs angularjs-directive

【解决方案1】：

正如评论中提到的，ng-model 和隔离范围不能很好地混合，请参阅Can I use ng-model with isolated scope?。

我建议不要在你的指令中创建任何范围，并使用 attrs 访问 display-format 属性：

var displayFormat = attrs.displayFormat;

【讨论】：

【解决方案2】：

我也更喜欢带有可重用指令的隔离作用域，在这种情况下，必须为 ng-model 提供到父作用域的正确路径：ng-model="$parent.params.departDate"

更新的插件： http://plnkr.co/edit/DuR6Om2kyzWD67hYExSh?p=preview

【讨论】：