使用AngularJS和指令的初学者问题 – 包装jQuery组件

首先，我应该提到我正在努力转向客户端编程。 我对js很新。 我之前的经历主要是在C和一些assembly。 几年前我还做了一些非常简单的PHP，当时它还是4.0。 所以简而言之，是javascript的新手，但我还是把它放了一下。

我做了很多搜索和潜伏，但未能纠正我的问题。

我正在弄清楚AngularJS的一些基础知识并且它非常好，但我很难理解指令的工作方式以及如何从自定义控件访问数据。

长话短说我试图用angularjs为bootstrap工作做一个自定义控件，这样我就可以在表单中正确使用它了。

这是控件： http ： //tarruda.github.com/bootstrap-datetimepicker/

我有一些其他的控件，我想要工作，但我想如果我可以得到这一个我可以很容易得到其他人。

这是我在这一点上的基本框架的链接： http ： //jsfiddle.net/uwC9k/6/

首先，我试图在模板工作后如何初始化控件（我认为，此时我几乎都做了）

link: function(scope, element, attr) { attr.$observe('dpid', function(value) { if(value) { $('#' + scope.dpid).datetimepicker({ language: 'en', pick12HourFormat: true }); } 

当我把它放在link指令中时，它什么也没做。 我甚至没有看到任何错误。 scope.dpid确实显示了控件的ID，所以我认为它会起作用。 但是唉，我对javascript的了解，告诉我，我不在范围之内，或者是一些无法访问元素的废话。

一旦我开始这样做，我不确定如何以表格forms访问这些数据。

任何帮助是极大的赞赏。

更新基本位工作，现在我需要知道如何将新控件中的数据导入我的控制器。 这是更新的新jsfiddle的链接。 http://jsfiddle.net/tmZDY/1/

更新2我想我对如何使这些数据可访问有了一个想法，但是我对javascript的了解不足让我再次干涸。

当我创建对象时，我就这样做了。

 var elDatepicker = element.datetimepicker({ language : 'en', pick12HourFormat : true, }); 

但是，当我尝试使用这个对象时，它似乎没有得到正确的对象，或者我只是缺少一些基本知识。 无论哪种方式，这肯定让我感到愚蠢。

 console.log(elDatepicker.getDate()); 

这失败了，getDate确实是一个方法，至少它看起来像是在插件的代码中。

Answer 1

您可以find()模板的第一个div ，然后应用datetimepicker() ，而不是隔离范围。 因此，您的HTML中不需要id ：

  mydate = {{mydate}} 

我还建议replace: true ：

 .directive('datepicker', function ($parse) { return { restrict: 'E', replace: true, template: '
' + '' + '' + '
', link: function (scope, element, attr) { var picker = element.find('div').datetimepicker({ language: 'en', pick12HourFormat: true }); var model = $parse(attrs.model); picker.on('changeDate', function(e) { console.log(e.date.toString()); console.log(e.localDate.toString()); model.assign(scope, e.date.toString()); scope.$apply(); }); } }; }) 

小提琴

$ parse有点棘手。 我展示的是它的主要用例：我们解析一个属性并返回一个函数，该函数上有一个assign()方法，允许我们更改范围属性。

Answer 2

其中一种方法可能是这样，如这个小提琴所示。 http://jsfiddle.net/uwC9k/10/

由于必须用模板字符串替换datepicker元素，因此这将是使用compile函数的一个很好的用例。 所以在编译函数中我用模板字符串替换datepicker元素。

一旦编译完成，我们将转到链接函数，它只是从编译函数内部返回的函数。 链接函数将使用日期选择器function初始化此

元素

 element.datetimepicker({ language: 'en', pick12HourFormat: true }); 

由于您包含了jquery，因此链接函数中的element属性是一个jquery warpped元素。 所以你可以马上调用datetimepicker方法。

Answer 3

您可以在div中添加类似datetimepicker的类，必须将其转换为datetimepicker，然后使用该类查找元素。

 .directive('datepicker', function() { return { restrict: 'E', template: '
    
', scope: { dpid: '@'}, link: function(scope, element, attr) { attr.$observe('dpid', function(value) { if(value) { $(element).find('.datetimepicker').datetimepicker({ language: 'en', pick12HourFormat: true }); } }); } }; }) 

演示： 小提琴