在角度指令中使用第三方库答案

【问题标题】：use third party lib in angular directive在角度指令中使用第三方库
【发布时间】：2013-11-04 04:41:43
【问题描述】：

我想为波斯日期选择器创建一个角度指令，我想使用的 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 || '');
          });

      };
   }
};
});

此代码在单击输入时显示日期选择器，当在输入中选择日期时显示，但模型未绑定且未更改我如何在此示例中进行绑定？ plunker 中的这个链接是我的代码：http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您需要让 Angular 知道该值已更改。看起来日期选择器调用 _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 指令的示例，它可能是一个很好的资源。

【讨论】：

我测试你的代码，但指令中的 onchange 不会在输入文本更改时引发，plunker 中的这个链接是我的代码 plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview>
我编辑了你的 plunker，我不得不修改 datepicker 的来源，所以一定要看看那个文件。 plnkr.co/edit/caVUpBbtMAGEEuqzRADX?p=preview

【解决方案2】：

目前有一个不错的可用。这是一个波斯 angularjs 日历： Amin Rahimi's angularjs Datepicker.

【讨论】：

如何在我的项目中使用它。实际上我将它作为一个模块添加到我的项目中，但我不知道它是否是指令以及如何将它放入我的 html 代码中

【解决方案3】：

你也可以使用这个版本的带有波斯日历的 angular-ui 引导程序：persian angular bootstrap

【讨论】：