您好,登錄后才能下訂單哦!
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:"<h2>自定義指令</h2>" }; }); </script>
restict匹配模式:分為四種:
1.元素匹配(E):<runn2></runn2>
2.屬性匹配(默認A)<div data-runn2></div>
3.樣式類匹配(C)<div class="runn2"></div>
4.注釋匹配(M)<!-- directive: runn2 -->
注意:directive前面需要有空格runn2后面需要有空格(這是一個小坑)
注釋匹配無法增加多個標(biāo)簽例:template:"<h2>自定義指令</h2><h3>自定義指令</h3>" 會導(dǎo)致報錯
但是在<div><h2>自定義指令</h2><h3>自定義指令</h3></div>這樣包含標(biāo)簽卻是正常的,小坑一個
注意:必須replace=true,否則注釋匹配無法使用
推薦使用元素和屬性的方式使用指令
當(dāng)需要創(chuàng)建帶有自己的模板的指令時,使用元素名稱的方式創(chuàng)建指令
當(dāng)需要為已有的HTML標(biāo)簽增加功能時,使用屬性的方式創(chuàng)建指令
以上就是Angular指令之restict匹配模式的實例詳解,本站有關(guān)AngularJS 的文章還有很多,希望大家搜索查閱,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。