如何在angular中创建datepicker指令？ [英] How to create datepicker directive in angular?

问题描述

我正试图深入获取Angular的自定义指令。



通过一些在线帖子，我对语法有了基本的了解。在datepicker指令上听过很多。



那么有人可以一步一步地发布一个datepicker角度指令的例子吗？



请回答这个随之查询： -



1）require属性的用途是什么？



2）什么时候我应该使用'A'，'E'作为限制选项？（对于ex datepicker）



3）编译和放大之间有什么区别？链接功能？



我尝试过：

 app.directive（'datetimepicker'，function（）{
 return {
 restrict：'AE'，
 require：'ngModel'，
 link：function（scope） ，ele，attr）{} 
}）; 

解决方案

引用：

1）require属性的用途是什么？

require属性将尝试访问另一个名为（在您的情况下）ngModel的指令。

Quote：

2）我什么时候应该使用'A'，'E' for restrict option？（对于ex datepicker）

这限制了你的指令用于特定的使用方法。



A =属性。所以类似于< span datetimepicker =>< / span>

E =元素。所以类似于< datetimepicker>

C = Class。类似于< span class =datetimepicker>< / span>

M = Comment。所以它就像是<！ - 指令：datetimepicker - >



我认为你不能同时使用两个AE来创建导演但是Im不是百分之百。

引用：

3）有什么区别编译与编辑之间链接功能？

为此，我会引导您到此链接获取解释： javascript - angularjs中编译和链接函数之间的区别是什么 - Stack Overflow [ ^ ]



那么至于你要求某人为你提供创建日期选择指令的分步说明，我会指示你使用google。这超出了快速答案的范围，并不是为了提供教程。



以下是一些很有前途的链接：



angularjs-datepicker [ ^ ]



javascript - AngularJS自定义datepicker指令 - Stack Overflow [ ^ ]



GitHub - g00fy- / angular-datepicker：有角度的calendar和datepicker指令 [ ^ ]



[ Material Angular Js - DatePicker ]



我还建议您查看角度指令文档：



[ Angular JS指令]

您可以简单地考虑使用`ui-bootstrap`插件`datepicker`组件。它具有简单的语法 uib-datepicker 。 UI-bootstrap还将几乎所有引导程序组件转换为它的语言化版本。

< div uib-datepicker ng-model =dt>< / div> 

I am trying to grab the custom directive of Angular in deep.

With some online post, I got a basic understanding on the syntax. Have heard a lot on datepicker directive.

So can someone please post an example of datepicker angular directive step by step?

Please ans this queries along with it:-

1)What is the use of require attribute?

2)When should I use 'A','E' for restrict option?(For ex datepicker)

3)What is the difference between compile & link function?

What I have tried:

app.directive('datetimepicker', function () {
return {
    restrict : 'AE',
    require :'ngModel',
    link : function(scope,ele, attr){}
    });

解决方案

Quote:

1)What is the use of require attribute?

The require attribute will try to access another directive called (in your case) ngModel.

Quote:

2)When should I use 'A','E' for restrict option?(For ex datepicker)

This restricts the use of a your directive to a specific method of using it.

A = attribute. So something like <span datetimepicker=""></span>
E = Element. So something like <datetimepicker>
C = Class. So something like <span class="datetimepicker"></span>
M = Comment. So it would be something like <!--directive:datetimepicker-->

I don't think you can use both AE for creating a directing but Im not 100% on that.

Quote:

3)What is the difference between compile & link function?

For this I would direct you to this link for an explanation: javascript - What is the difference between compile and link function in angularjs - Stack Overflow[^]

Then as for your request for someone to provide you step by step instructions for creating a date picker directive, I'd direct you to use google. This is beyond the scope of Quick Answers and isn't meant to provide tutorials.

Here are some promising links:

angularjs-datepicker[^]

javascript - AngularJS custom datepicker directive - Stack Overflow[^]

GitHub - g00fy-/angular-datepicker: calendar and datepicker directives for angular[^]

[Material Angular Js - DatePicker]

I'd also recommend you take a look at the Directive documentation for angular:

[Angular JS Directive]

You could simply consider using `ui-bootstrap` plugin `datepicker` component. It has simple syntax uib-datepicker. UI-bootstrap also has converted almost all bootstrap component to angularized version of it.

<div uib-datepicker ng-model="dt"></div>

这篇关于如何在angular中创建datepicker指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！