Question

首先，我应该提到我正在努力转向客户端编程。我对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确实是一个方法，至少它看起来像是在插件的代码中。

Answer 1

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

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

Fiddle

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

Answer 2

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

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

一旦编译完成，我们将转到链接函数，它只是从编译函数内部返回的函数。链接函数将使用

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

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

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

Answer 3

您可以将类似datetimepicker的类添加到必须转换为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
            });
                }
            });
        }
    };
})

演示：Fiddle

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

3 个答案: