5

我对 Angular 很陌生，并且有一个特定的用例我有一个包含两个字段的表单 - 名称和日期时间。

名称是 ng-model 但 datetime 不是因为它不是 Angular 的一部分并且是一个 jquery 组件

我想做的事？
这是 plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview

a.）我想将日期与 ngModel 相关联，例如 ngModel="transaction.date"
b.）使用 Angular 方式 根据需要验证它

看起来像的东西（很像Angular）

<input type="text" name="transactionDate" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" required>

为什么？
a.) 以 Angular 方式处理事物
b.) 它使模型在测试、验证方面更加一致

我在Stackoverflow上提出了这个问题，建议使用自定义指令，有人可以通过示例指导我如何做到这一点吗？

请进一步指导我，因为我目前无法验证它

非常感谢

4

2 回答 2

9

根据 Ketan 的回答，我必须编写一个新指令并将值形式 jQuery 关联到 ng-model，然后使用 form.model 进行验证。该指令看起来像

app.directive('dateTime', function(){
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) {
        console.log('no model, returning');
        return;
      }

      element.bind('blur keyup change', function() {
        console.log('datetime changed: ', $('.form_datetime input').val());
        scope.$apply(read);
      });

      read();

      function read() {
        ngModel.$setViewValue(element.val());
      }
    }
  }
});

可以在这里找到 plunker

于 2013-05-13T04:27:18.377 回答
3

假设您知道如何编写指令，则需要使用NgModelController指令内部并使用$setViewValue(value)方法。（参见下页示例）。

http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

这必须从您的自定义 Datepicker 事件中调用，该事件在用户完成选择时触发。

于 2013-05-12T23:23:42.247 回答