如何创建使用 ng-model 的角度日期选择器指令答案

【问题标题】：how to create an angular datepicker directive that uses ng-model如何创建使用 ng-model 的角度日期选择器指令
【发布时间】：2013-05-23 23:53:31
【问题描述】：

我为我的 jQuery UI 日期选择器创建了一个角度指令。问题是指令在选择日期时不会更新输入的NG模型。知道为什么吗？

http://jsbin.com/ufoqan/1/edit

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

AngularJS 实际上提供了一个特殊的控制器来与ngModel 交互，您可以在指令中使用它；只需将 require: 'ngModel' 添加到您的指令定义中即可。

这为您的link 函数提供了第四个参数，这是您在require 中请求的控制器——在本例中，是of ngModelController 的一个实例。它有一个名为$setViewValue 的方法，您可以使用它来设置模型的值：

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $(el).datepicker({
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

ngModelController 的美妙之处在于它会自动处理验证和格式化（在特定输入 type 的情况下）以及与 ngChange 回调之类的集成；查看this example：http://jsbin.com/ufoqan/6/edit

【讨论】：

好答案。注意，这里有一个现有的 jquery UI 日期选择器：github.com/angular-ui/ui-date 阅读源代码将有助于了解 ngModelController 的工作原理
了解非常有用。谢谢布兰登！

【解决方案2】：

可能有更好的方法，但这会奏效：

http://jsbin.com/ufoqan/4/edit

app.directive('datepicker', function() {
  return {
    link: function(scope, el, attr) {
      $(el).datepicker({
        onSelect: function(dateText) {
          console.log(dateText);
          var expression = attr.ngModel + " = " + "'" + dateText + "'";
          scope.$apply(expression);
          console.log(scope.startDate);
          // how do i set this elements model property ?
        }
      });
    }
  };
});

你还问为什么。原因是 jquery 发生在角度系统之外。您可以在 $apply 方法下找到更多信息：docs

【讨论】：

谢谢！如果我有一个函数调用存储在我的指令属性中并且我想调用它。我该怎么做？ jsbin.com/ufoqan/5/edit
nvm，我想我明白了，scope.$apply(attr.datepicker);

【解决方案3】：

@Michelle Tilley 和 @Jonah 关于将指令链接到 ngModel 是正确的，但为什么你不使用纯 Angular 而不是 jQuery 的 datePicker？
好吧，我代表ADMdtp 模块。它是纯粹的 AngularJs dateTimePicker，有很多很棒的选择：

与 ngModel 完全同步，因此无需销毁或手动更新 dateTimePicker。
高级范围选择器；将尽可能多的 dateTimePicker 关联在一起，并且无需销毁或手动更新每个 dateTimePicker。
禁用模式；您可以轻松禁用一周或一个月中的任何一天，例如所有周末。
换日过渡。（诅咒你可以在选项中禁用它）
获取完整的日期详细信息，例如 UNIX 格式的日期、日期格式和年、月、日、小时和分钟，以及...通过完整数据属性。
...

<adm-dtp ng-model="date" full-data="date_full"></adm-dtp>

【讨论】：