Angular指令之restict匹配模式的詳解
Angular指令之restict匹配模式的詳解
<body data-ng-app="myapp">
<runn2></runn2>
<div data-runn2></div>
<div class="runn2"></div>
<!-- directive: runn2 -->
<script>
var app=angular.module("myapp",[]);
app.directive('runn2',function(){
return{
restrict:"EACM",
replace:true,
template:"<h1>自定義指令</h1>"
};
});
</script>
restict匹配模式：分為四種：
1.元素匹配（E）:<runn2></runn2>
2.屬性匹配（默認(rèn)A）<div data-runn2></div>
3.樣式類匹配（C）<div class="runn2"></div>
4.注釋匹配（M）<!-- directive: runn2 -->
注意：directive前面需要有空格runn2后面需要有空格（這是一個(gè)小坑）
注釋匹配無(wú)法增加多個(gè)標(biāo)簽例：template:"<h1>自定義指令</h1><h2>自定義指令</h2>" 會(huì)導(dǎo)致報(bào)錯(cuò)
但是在<div><h1>自定義指令</h1><h2>自定義指令</h2></div>這樣包含標(biāo)簽卻是正常的，小坑一個(gè)
注意：必須replace=true，否則注釋匹配無(wú)法使用
推薦使用元素和屬性的方式使用指令
當(dāng)需要?jiǎng)?chuàng)建帶有自己的模板的指令時(shí)，使用元素名稱的方式創(chuàng)建指令
當(dāng)需要為已有的HTML標(biāo)簽增加功能時(shí)，使用屬性的方式創(chuàng)建指令
以上就是Angular指令之restict匹配模式的實(shí)例詳解，本站有關(guān)AngularJS 的文章還有很多，希望大家搜索查閱，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
Angular(5.2->6.1)升級(jí)小結(jié)
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級(jí)小結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
這篇文章主要介紹了AngularJs表單驗(yàn)證實(shí)例代碼解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細(xì)的資料，及簡(jiǎn)單代碼示例，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08
Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了AngularJS路由刪除#符號(hào)解決的辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
詳解創(chuàng)建自定義的Angular Schematics
本文對(duì) Angular Schematics 進(jìn)行了介紹，并創(chuàng)建了一個(gè)用于創(chuàng)建自定義 Component 的 Schematics ，然后在 Angular 項(xiàng)目中以它為模板演練了通過(guò) Schematics 添加自定義的 Component，感興趣的小伙伴們可以參考一下2018-06-06
Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解
今天小編就為大家分享一篇Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了AngularJs Javascript MVC 框架的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06