Angular(指令新手):如何将日期时间选择器添加到ngModel以便可以验证它?

时间:2013-05-12 22:10:55

标签: angularjs angularjs-directive

我是Angular的新手并且考虑到了一个特定的用例 我的表单有两个字段 - 名称和日期时间。

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

我想做什么?
这是plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview

a。)我想将日期与ngModel关联,例如ngModel =“transaction.date” b。)使用Angular方式

将其验证为 required

看起来像的东西(很像Angular)

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

为什么吗
a。)对于Angular方式的事情 b。)它使模型更加一致,以进行测试,验证

我在Stackoverflow上问了这个问题,建议使用自定义指令,有人可以给我指示如何做到这一点吗?

请指导我,因为我目前无法验证

非常感谢

2 个答案:

答案 0 :(得分:9)

根据Ketan的回答,我必须编写一个新指令,并将值形式jQuery与ng-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());
      }
    }
  }
});

可以找到here

的掠夺者

答案 1 :(得分:3)

假设您知道如何编写指令,则需要在指令中使用NgModelController并使用$setViewValue(value)方法。 (参见下页的示例)。

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

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