Question

我为jQuery UI datepicker创建了一个angular指令。问题是指令在选择日期时不更新输入的ng-model。知道为什么吗？

Answer 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

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，有很多greate选项：

与ngModel完全同步，因此无需销毁或手动更新dateTimePicker。
高程范围选择器;根据需要制作尽可能多的dateTimePicker，再次无需销毁或手动更新每个dateTimePicker。
禁用模式;很容易就可以在周或月中禁用任何一天，就像所有周末一样。
在变化的日子过渡。（诅咒你可以在选项中禁用它）
获取完整日期详细信息，例如UNIX格式的日期，日期格式和年，月，日，小时和分钟，以及...全数据属性。
...

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

如何创建使用ng-model的角度datepicker指令

3 个答案: