关于AngularJS和指令的初学者问题——包装jQuery组件

Question

首先，我应该提一下，我正在努力过渡到客户端编程。我对js很陌生。我以前的经验主要是C语言和一些汇编语言。几年前，当php还是4.0的时候，我也做了一些非常简单的php。简而言之，我是javascript新手，但对它有点了解。

我已经做了相当多的搜索和潜伏，但没有能够纠正我的问题。

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

长话短说，我正试图使一个自定义控件引导工作与angularjs，所以我可以使用它的形式正确。

这里是控件: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指令中时，它什么也不做。我甚至没有看到任何错误。范围。dpid确实显示了控件的ID，所以我认为它会起作用。但是，唉，我对javascript的蹩脚理解告诉我，我超出了作用域或一些诸如此类的废话，我无法访问元素。

一旦我开始，我不确定如何使这些数据在表格中可访问。

感谢您的帮助。

得到了基本的位工作，现在我需要知道如何从新控件获得数据到我的控制器。这里是一个链接到新的jsfiddle更新。http://jsfiddle.net/tmZDY/1/

更新2 我想我有一个关于如何使这些数据可访问的想法，但我缺乏javascript的知识使我再次干涸。

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

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

然而，当我尝试使用这个对象时，它似乎没有得到正确的对象，或者我只是缺少一些基本知识。不管怎样，这肯定会让我觉得自己很愚蠢。

console.log(elDatepicker.getDate());

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

Answer 1

代替隔离作用域，您可以将模板的第一个div设置为find()，然后应用datetimepicker()。所以你不需要id在你的HTML:

<datepicker model="mydate"></datepicker>
mydate = {{mydate}}

我也建议replace: true:

.directive('datepicker', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="well"><div class="input-append">'
         + '<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>'
         + '<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>'
         + '</div></div>',
        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有点棘手。我所展示的是它的主要用例:我们解析一个属性并返回一个函数，该函数具有允许我们更改scope属性的assign()方法。

Answer 2

可以这样做，如下图所示。http://jsfiddle.net/uwC9k/10/

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

编译完成后，我们将转到link函数，它只是编译函数内部返回的函数。链接函数要做的是使用

初始化具有日期选择器功能的<div class="input-append">元素

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

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

Answer 3

您可以添加一个类，如datetimepicker的div必须转换为日期时间选择器，然后使用该类查找元素。

.directive('datepicker', function() {
    return {
        restrict: 'E',
        template: '<div class="well"><div id={{dpid}} class="input-append datetimepicker"><input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar">      </i>    </span>  </div></div>',
        scope: { dpid: '@'},
        link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $(element).find('.datetimepicker').datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
                }
            });
        }
    };
})

演示:小提琴