将 jquery 插件转换为 Angular 指令

我正在尝试将 jQuery 插件转换为指令。这是图书馆：Github https://github.com/mousavian/bootstrap-jalali-datepicker.

在文档中有一个选项：

$(document).ready(function() {
        $("#datepicker").datepicker();
        $("#datepickerbtn").click(function(event) {
            event.preventDefault();
            $("#datepicker").focus();
        })
    });

我创建的指令：

app.directive('dateP', function(){
    return{
        restrict:'A',
        require:'ngModel',
        link:function(scope, element, attr, ngModel){
            $(element).datepicker(scope.$eval(attr.dateP));
            console.log('hey');
            ngModel.$setViewValue(scope);
        }
    }
}); 

但它不起作用，任何帮助将不胜感激。

Plunker http://plnkr.co/edit/jHQDDdagJbAaurqvgg69?p=preview .

我读过这个：https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

基本上你写的ng-mode代替ng-model和指令你应该定义日期选择器选项而不是scope.$eval(attr.dateP)这是完全错误的。里面日期选择器 https://bootstrap-datepicker.readthedocs.org/en/release/你需要提供他们的选择json格式就像这里我们提到的选项一样{ format: 'dd/mm/yyyy' })

HTML

<input date-p id="datepicker1" class="input-small" type="text" ng-model="dt">

指示

app.directive('dateP', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.datepicker({
        format: 'dd/mm/yyyy'
      });
    }
  }
});

Update

供展示datepicker单击按钮时，您需要在控制器中添加以下方法。

控制器

$scope.showDatepicker =  function(){
  angular.element('#datepicker1btn').datepicker('show');
};

工作笨蛋 http://plnkr.co/edit/lFGbXG9A14X98evE85M0?p=preview

Thanks.