Angularjs自定義指令通過常規html

Question

有人可以向學習者解釋在正常的html元素中使用自定義指令的好處是否可以有人給出一個例子？

Answer 1

正常的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 
    } 
}); 

Answer 2

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你不能改變例如）？使用指令爲您提供更大的靈活性。