angularjs – Angular(指令新手)：如何将日期时间选择器添加到ng

发布时间：2020-12-17 06:47:04 所属栏目：安全来源：网络整理

导读：我是Angular的新手,并且考虑到了一个特定的用例我有一个表单有两个字段 – 名称和日期时间. 名称是ng-model,但datetime不是因为它不是Angular的一部分而且是一个jquery组件我想做的事？这是plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=previe

我是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问过这个问题并建议使用自定义指令,有人可以给我指示如何做到这一点吗？

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

非常感谢你

解决方法

基于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的plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!