我应该为每种类型的用户输入创建一个指令

时间:2016-02-09 13:28:22

标签: html angularjs

我正在Angular中创建一个绿地应用程序。 我想知道如何处理userinput。 我将创建10个以上的日期输入,20个文本输入,8个下拉菜单,30个按钮,10个以上的货币输入等,所有这些都经过验证。

以我作为.NET开发人员的背景,我习惯于为每个控件(html控件,许多引导程序,验证行)提供大量的html,并在所有html中重复使用。

现在Angular有指令。

我应该为每种类型的用户输入创建指令吗?

并且'我应该'我的意思是以实用的方式(因为它非常方便)和/或建筑方式(因为它是更好的架构)。

我问的第二个原因是因为我发现指令语法是要学习的更难的部分之一。

3 个答案:

答案 0 :(得分:1)

在我看来,你不应该为输入/选择创建任何指令。 输入和选择的Html代码简洁易行,因此指令根本无法帮助您。而不是使用输入构建角度指令让我们看看:

<input ng-model="" 
  ng-disable="" 
  ng-pattern="for email format"

对于select你也可以使用ng-options 为了验证目的,你可以使用类似的东西:

ng-class="{'has-error': !joinForm.password.$valid && !joinForm.password.$pristine }"

所以我认为自定义指令只会使你的工作复杂化

答案 1 :(得分:1)

输入等角度有很多东西。

您可能需要添加自定义验证的指令,您可以在网上找到样本。

检查此示例http://weblogs.asp.net/dwahlin/building-a-custom-angularjs-unique-value-directive

请注意,此样本不是最干净的样本。

这个更好:http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/

但是我认为你应该从第一个开始实施第一个,如果你想要的话,一步一步地去做。是的指令语法和ngModelController的用法并不那么容易。

其他示例:为了减少要输入的html并确保我的所有字段都具有相同的演示文稿(左侧标签,错误消息,右侧信息工具提示,......)。我为此创建了一个指令。这是一个问题,你想要走多远,以及你有多长时间。

最重要的是:在重新发明轮子之前,请检查网络,如果它没有被角度本地支持,那么已经完成了很多工作并在线共享。

答案 2 :(得分:1)

我倾向于同意Przemek的观点,一般来说,它会使事情复杂化。除了您可以构建一个可重用的表单,您希望预先构建该表单以便在多个位置使用。我最近在一个Angular应用程序上工作过,它有多个编辑面板,我们基本上为常用组件构建了自定义指令,然后将它们组合在一起制作单独的表单/编辑面板。但不是单一元素。