Angularjs自定义指令比常规html

Question

有人可以向学习者解释在正常的html元素中使用自定义指令有什么好处，有人能给出一个例子吗？

Answer 1

1. 您将其逻辑与其他应用程序分开，代码可以轻松重复使用。
2. 你给“普通”html一个含义，这有助于你理解当你在源代码中看到它时元素的作用。

例如：

<dropdown>
    <li>item 1</li>
    <li>item 2</li>
</dropdown>

vs

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>

当然，你可以争辩说“但我可以使用有意义的css类来实现相同的结果”，但如果这些类被分配了一些css规则（来自外部css你不能改变的话）怎么办？使用指令可以为您提供更大的灵活性。

Answer 2

普通的html指令和自定义指令类似于Inbuilt functions和user defined函数。

自定义指令是AngularJS的强大功能。

您可以创建与普通标签一样的用户定义标签。因此，如果要创建自定义标记（指令），则需要为html提供新标记（注意：自定义指令只能由角度页面使用。）。

<强>优点

此处列出了用户定义函数的所有优点。

示例

考虑一个场景，您希望在html中显示多个公司的地址，

普通的html看起来像，

<div>
    <p> Tuition Wiki </p>
    <p> Connecting Tuition Teacher and Students </p>
    <p> www.tuitionwiki.com <p>
    <p> info@tuitionwiki.com </p> 
<div>

您需要重写这组html代码，以便显示公司详细信息。

您可以将这组代码包装到自定义指令中，并且可以使用自定义指令替换这组代码。

<company-address> </company-address>

这将是显示公司地址的代码。

myApp.directive( function(){
    return {
       template : '<p> Tuition Wiki </p> ....' // here you can write your html
    }
});