与AngularJS和指令初学者的问题 - 包装一个jQuery组件指令、初学者、组件、问题

2023-09-13 04:44:20 作者:如此丶寂寞

首先,我要提到我只是努力过渡到客户方的编程。我是很新的JS。我的previous经验,主要是C和一些汇编。我也做了一些非常简单的PHP年前,这里还是4.0。因此,在短期,新的JavaScript,但把我的头周围一点。

First, I should mention I am just working on transitioning to clientside programming. I am very new to js. My previous experience is primarily in C and some assembly. I also did a bit of very simple php years ago when it was still 4.0. So in short, new to javascript but putting my head around it a bit.

我已经做了相当多的搜索和潜伏的,但一直没能纠正我的问题。

I have done quite a bit of searching and lurking but have not been able to rectify my issues.

我找出一些AngularJS的基础知识,这是相当不错的,但我有我的包裹周围指令的工作难度头以及如何从自定义控件访问数据。

I am figuring out some of the basics of AngularJS and it is quite nice, but I am having difficulty wrapping my head around how directives work and how to access data from custom controls.

长话短说,我试图让与angularjs引导工作自定义控件,所以我可以在表单中正确使用它。

Long story short I am trying to make a custom control for bootstrap work with angularjs so I can use it in forms properly.

下面是控制: http://tarruda.github.com/bootstrap-datetimepicker/

我有我想要工作的一些其他的控制,但我想,如果我能得到这个打算,我可能能得到别人很轻松了。

I have some other controls that I want to make work but I figure if I can get this one going I can probably get the others easily enough.

下面是一个基本的框架我有什么在这一点上的链接: http://jsfiddle.net/ uwC9k / 6 /

Here is a link to a basic framework what I have at this point: http://jsfiddle.net/uwC9k/6/

首先,我想换我围绕如何,一旦我有模板工作初始化控制头(其中,我pretty钱?在这一点上,我认为)

First off, I am trying to wrap my head around how to initialize the control once I have the template working (Which, I pretty much do at this point I think)

link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $('#' + scope.dpid).datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
}

当我把在链接指令,它什么都不做。我甚至不看任何错误。 scope.dpid确实显示控件的ID,所以我认为这是可行的。但是,唉,我的JavaScript的febble理解告诉我,我的范围或一些这样的废话,我无法访问元素之外。

When I put that in the link directive, it does nothing. I don't even see any errors. scope.dpid is indeed showing the ID of the control so I thought it would work. But alas, my febble understanding of javascript tells me that I am outside of the scope or some such nonsense where I cannot access the element.

一旦我得到那个打算,我不完全知道如何使这个数据在任何形式访问。

Once I get that going, I am not exactly sure how to make this data accessible in forms either.

任何帮助是极大AP preciated。

Any help is greatly appreciated.

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

更新2 我想我已经就如何使这些数据访问,但我的javascript的缺乏知识给我留下又干的想法。

Update 2 I think I have an idea on how to make this data accessible but my lacking knowledge of javascript has left me dry again.

当我创建对象我这样做正是如此。

when I create the object I do it thusly.

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

然而,当我尝试使用这个对象,似乎并没有被得到正确的,还是我只是缺少一些基本知识。无论哪种方式,这肯定让我感到愚蠢的。

However, when I try to use this object it does not seem to be getting the correct one, or I am just missing some basic knowledge. Either way this is sure making me feel foolish.

console.log(elDatepicker.getDate());

这失败,GETDATE确实是一个方法,至少它看起来是在插件的code。

This fails, getDate is indeed a method, at least it looks like it is in the code of the plugin.

推荐答案

而不是一个孤立的范围,可以找到()第一个 DIV 您的模板然后申请的DateTimePicker和()。所以,你不需要 ID 在你的HTML:

Instead of an isolate scope, you can find() the first div of your template and then apply datetimepicker(). So you don't need an id in your HTML:

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

我也建议更换:真正的

.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 is a bit tricky. What I show is the main use case for it: we parse an attribute and get back a function which has an assign() method on it that allows us to change the scope property.