6

首先，我应该提到我正在努力过渡到客户端编程。我对 js 很陌生。我以前的经验主要是 C 和一些汇编。几年前我还做了一些非常简单的 php，当时它还是 4.0。简而言之，对 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
            });
}

当我把它放在链接指令中时，它什么也不做。我什至没有看到任何错误。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确实是一个方法，至少在插件的代码中看起来是这样的。

4

3 回答 3

3

find()您可以先div使用模板，然后再应用，而不是隔离范围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有点棘手。我展示的是它的主要用例：我们解析一个属性并返回一个函数，该函数有一个assign()允许我们更改范围属性的方法。

于 2013-03-21T01:54:51.590 回答
0

一种方法可能是这样，如this fiddle所示。http://jsfiddle.net/uwC9k/10/

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

编译完成后，我们将进入链接函数，它只是从编译函数内部返回的函数。链接函数将<div class=\"input-append\">使用日期选择器功能初始化此元素

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

由于您包含 jquery，因此链接函数中的元素属性是 jquery 扭曲元素。因此，您可以立即调用该datetimepicker方法。

于 2013-03-21T02:14:05.490 回答
0

您可以向必须转换为 datetimepicker 的 div 添加一个类datetimepicker，然后使用该类查找元素。

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

演示：小提琴

于 2013-03-21T03:04:10.647 回答