AngularJS和指令的初学者问题 - 包装一个jQuery组件
AngularJS和指令的初学者问题 - 包装一个jQuery组件
首先，我应该提到我正在转向客户端编程。我对js非常陌生。我的以前经验主要是C语言和一些汇编语言。几年前，我还用过一点非常简单的php，当时版本还是4.0。简而言之，对javascript很陌生，但已经开始了解一些。\n我已经进行了很多搜索和观察，但还没有解决我的问题。\n我正在弄清楚AngularJS的一些基础知识，它非常好用，但我很难理解指令是如何工作的，以及如何从自定义控件中访问数据。\n长话短说，我正在尝试使一个用于bootstrap的自定义控件与angularjs配合使用，以便可以正确地在表单中使用它。\n这是控件的链接：http://tarruda.github.com/bootstrap-datetimepicker/\n我还有一些其他的控件需要使其工作，但我想如果我能让这个工作，其他的应该也不难。\n这是一个链接到我目前所拥有的基本框架：http://jsfiddle.net/uwC9k/6/\n首先，我正在努力弄清楚在模板工作之后如何初始化控件（我认为在这一点上我基本上已经做到了）\n
link: function(scope, element, attr) {
attr.$observe('dpid', function(value) {
if(value) {
$('#' + scope.dpid).datetimepicker({
language: 'en',
pick12HourFormat: true
});
}
\n当我将它放在链接指令中时，什么都没有发生。我甚至没有看到任何错误。scope.dpid确实显示了控件的ID，所以我以为它会起作用。但不幸的是，我对javascript的肤浅理解告诉我，我在范围之外或者类似的地方无法访问该元素。\n一旦我搞定了这个，我也不确定如何在表单中使这个数据可访问。\n非常感谢任何帮助。\n更新\n基本工作已经完成，现在我需要知道如何将新控件的数据传递给我的控制器。这是更新后的jsfiddle链接。\nhttp://jsfiddle.net/tmZDY/1/\n更新2\n我觉得我知道如何使这个数据可访问了，但是我对javascript的知识欠缺又让我感到困惑。\n当我创建对象时，我是这样做的。\n
var elDatepicker = element.datetimepicker({
language : 'en',
pick12HourFormat : true,
});
\n然而，当我尝试使用这个对象时，它似乎没有得到正确的对象，或者我只是缺少一些基础知识。无论如何，这确实让我感到很愚蠢。\n
console.log(elDatepicker.getDate());
\n这个失败了，getDate确实是一个方法，至少在插件的代码中看起来是这样的。
AngularJS是一个流行的JavaScript框架，用于构建Web应用程序。它的一个重要特性是指令（directive），用于在HTML中添加自定义的行为和功能。在使用AngularJS和指令的过程中，有一个初学者提出了一个问题，即如何将一个jQuery组件包装成一个指令。
问题的原因是他想在AngularJS应用程序中使用一个jQuery的日期时间选择器（datetimepicker），但不知道如何将它集成到AngularJS的指令中。他想要一个指令，将一个div元素转换为datetimepicker，并且可以使用一个类名来查找这个元素。
为了解决这个问题，他创建了一个名为"datepicker"的指令，并在指令的模板中定义了一个具有特定类名的div元素。然后，他使用指令的link函数来监听dpid属性的变化，并在其发生变化时初始化datetimepicker组件。在link函数中，他使用jQuery的find方法来查找具有特定类名的元素，并将datetimepicker应用于它。
通过这种方式，他成功地将jQuery的datetimepicker组件包装成了一个AngularJS的指令。这使得在AngularJS应用程序中使用这个组件变得更加方便和灵活。
你可以在下面的链接中找到一个演示示例：[Fiddle](http://jsfiddle.net/arunpjohny/uwC9k/11/)
问题的出现原因：
这个问题是关于使用AngularJS和指令封装jQuery组件的初学者问题。原帖中的提问者想要将一个datetimepicker组件包装成一个AngularJS指令，并将选中的日期更新到控制器中的数据。
解决方法：
在指令中，可以使用replace: true将指令元素替换为指定的模板。在link函数中，使用$parse解析指令的属性，并通过assign()方法将日期值赋给相应的$scope属性。同时，可以使用element.find()方法找到模板中的第一个div元素，并调用datetimepicker()方法初始化datetimepicker组件。
最终，通过以上的方法，问题得到了解决，指令成功封装了datetimepicker组件，并且可以将选中的日期更新到控制器中的数据。
文章总结：
这个问题是一个关于使用AngularJS和指令封装jQuery组件的初学者问题。在指令中，通过replace: true将指令元素替换为指定的模板，并使用$parse解析指令的属性。然后，通过find()方法找到模板中的第一个div元素，并调用datetimepicker()方法初始化datetimepicker组件。最后，在指令的link函数中，使用assign()方法将选中的日期赋给$scope属性，以更新控制器中的数据。通过以上的解决方法，问题得到了解决，指令成功封装了datetimepicker组件，并且可以将选中的日期更新到控制器中的数据。