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

Question

我为我的 jQuery UI datepicker 创建了一个角度指令。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 实际上提供了一个特殊的控制器来与之交互ngModel，您可以在指令中使用它；只需添加require: 'ngModel'到您的指令定义中。

这为您的link函数提供了第四个参数，它是您要求的控制器——在require这种情况下，是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回调之类的集成；看看这个例子：http: //jsbin.com/ufoqan/6/edit

Answer 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

Answer 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>