Question

我想为persian datepicker创建一个angular指令，我想使用的javascript lib是http://jspersiandatepicker.codeplex.com/，我的代码是：

<input type="text" persiandatepicker ng-model="mydate" />{{mydate}}

directive('persiandatepicker', function() {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function (scope, element, attrs, ngModel) {
          if (!ngModel) return;

          ngModel.$render = function () {
              element.bind("click", function () {
              PersianDatePicker.Show(this, ngModel.$viewValue || '');
          });

      };
   }
};
});

此代码显示datepicker，当点击输入时，当选择日期显示在输入中，但模型没有绑定而不改变我怎么能在这个样本中进行绑定？ plunker中的这个链接是我的代码：http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview

Answer 1

你需要让角知道值已经改变了。看起来像datepicker调用_textBox.onchange（）;当它完成更新文本框以便您可以挂钩该事件。您需要将代码包装在

中

 element.bind("onchange", function () {
     scope.$apply(function() {
         //Code to update model goes here.
         //Basically you will need to copy the textbox's contents to the model,
         // you may wish to convert to a date object as well
     }
 }

angularui datepicker源代码只有120行，如果您正在寻找有关创建datepicker指令的示例，那么它可能是一个很好的资源。

Answer 2

目前有一个很好的可用。这是一个波斯角度日历： Amin Rahimi's angularjs Datepicker。

Answer 3

此外，您可以使用此版本的具有波斯日历的angular-ui引导程序：persian angular bootstrap

在angular指令中使用第三方lib

3 个答案: