什么时候应该更喜欢 Angular 指令而不是 html 原生标签？答案

【问题标题】：When should prefer angular directive over html native tag?什么时候应该更喜欢 Angular 指令而不是 html 原生标签？
【发布时间】：2014-06-21 13:00:10
【问题描述】：

我是 angularjs 的忠实粉丝，我最近开始在我所有的“趣味编程”项目中使用它。我有一个很大的好奇心：

我有两个输入，一个被 ng-disabled 指令禁用，另一个被 html 标签 禁用（link 中有更好的说明）：

//...

<input type="text" disabled value="This is an html input text disabled" />
<input type="text" ng-disabled="true" value="disabled with angular js directive" />

//...

使用浏览器功能，我可以右键单击输入并删除禁用和 ng-disabled 标记，但只有带有禁用标记的标记是可编辑的，即使在 ng-disabled 指令时，另一个仍将被角度跟踪已被删除。

那么，我应该何时以及为什么更喜欢使用 ng 指令而不是原生 html 标签？让角度跟踪所有这些动作可能会产生什么影响？真的值得到处使用吗？

【问题讨论】：

希望在模型和视图之间进行实时数据绑定时首选指令。否则，使用原生 HTML 属性。

标签： javascript html angularjs angularjs-directive

【解决方案1】：

如果元素应该始终被禁用，请使用原生 html 'disabled'。（静态，例如，如果您想提供带有文本的输入，并且从不让用户更改它）
如果它应该根据范围内的变量值进行更改，请使用 angular。

例如，假设一个按钮应该改变输入的状态。

<input type="button" ng-click="inpDisabled = true" >Disable Input</input>
<input type="text" ng-disabled="inpDisabled" />

live example

如果你仍然使用ng-disabled="true" 不会有任何伤害，但它是多余的。

【讨论】：

【解决方案2】：

如果你想让指令静态，你应该使用原生html

<your-tag disable><your-tag>

反对

<your-tag ng-disabled="true"><your-tag>

但是 AngularJS 不能这样工作，你应该初始化你的应用程序和控制器，然后将一个变量作为参数传递给你的指令：

JS：

$scope.isDisabled = true;

HTML：

<your-tag ng-disabled="isDisabled"><your-tag>

您应该阅读更多教程以使事情变得清晰

【讨论】：