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

首先,我应该提一下我正在努力过渡到客户端编程.我对js很新.我以前的经验主要是在C和一些装配.几年前我还做了一些非常简单的 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的了解,告诉我,我不在范围之内,或者是一些无法访问元素的废话.

一旦我开始这样做,我不确定如何以表格形式访问这些数据.

任何帮助是极大的赞赏.

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

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

当我创建对象时,我就这样做了.

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

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

console.log(elDatepicker.getDate());

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

解决方法

您可以找到()模板的第一个div,然后应用datetimepicker(),而不是隔离范围.因此,您的HTML中不需要ID：

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

我还建议替换：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,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();
           });
        }
    };
})

Fiddle

$parse有点棘手.我展示的是它的主要用例：我们解析一个属性并获取一个函数,该函数上有一个assign()方法,允许我们更改scope属性.