转换jQuery插件到指令角 [英] Convert jquery plugin into directive angular

问题描述

我想jquey插件转换成指令：这里是库： Github上。

I'm trying to convert jquey plugin into directive : here is the library : Github .

在文档中有一个选项：

$(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);
        }
    }
}); 

但它不工作，任何帮助将是AP preciate它。

but it's not working , any help would be appreciate it .

Plunker 。

我读过这样的：<一href=\"https://amitgharat.word$p$pss.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/\" rel=\"nofollow\">https://amitgharat.word$p$pss.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

推荐答案

基本上你写的的NG模式而不是 NG-模型和指令，你应该定义日期选择器选项不是范围。$的eval（attr.dateP）这是完全错误的。内部的日期选择器 您需要提供<$他们的选择C $ C> JSON 格式喜欢这里我们提到的选择，因为 {格式：'DD / MM / YYYY'}）

Basically you written ng-mode instead of ng-model and directive you should define date-picker options not the scope.$eval(attr.dateP) which is totally wrong. Inside datepicker you need to provide their options in json format like here we mentioned option as { 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'
      });
    }
  }
});

更新

有关节目日期选择器按钮点击你需要做下面的添加方法控制器中。

For show datepicker on button click you need to do add below method inside your controller.

控制器

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

工作Plunkr

感谢。

这篇关于转换jQuery插件到指令角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！