javascript - 如何创建一个使用 ng-model 的 Angular 日期选择器指令

Question

我为我的 jQuery UI 日期选择器创建了一个 Angular Directive(指令)。 The problem is that the directive doesn't update the input's ng-model when a date is selected.知道为什么吗？

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

Answer 1

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

这为您的 link 函数提供了第四个参数，它是您在 require 中请求的 Controller ——在本例中，是一个实例 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