Angular指令之restict匹配模式的詳解
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)秦皇島免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
<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.屬性匹配(默認(rèn)A)<div data-runn2></div>
3.樣式類匹配(C)<div class="runn2"></div>
4.注釋匹配(M)<!-- directive: runn2 -->
注意:directive前面需要有空格runn2后面需要有空格(這是一個(gè)小坑)
注釋匹配無法增加多個(gè)標(biāo)簽例:template:"<h2>自定義指令</h2><h3>自定義指令</h3>" 會(huì)導(dǎo)致報(bào)錯(cuò)
但是在<div><h2>自定義指令</h2><h3>自定義指令</h3></div>這樣包含標(biāo)簽卻是正常的,小坑一個(gè)
注意:必須replace=true,否則注釋匹配無法使用
推薦使用元素和屬性的方式使用指令
當(dāng)需要?jiǎng)?chuàng)建帶有自己的模板的指令時(shí),使用元素名稱的方式創(chuàng)建指令
當(dāng)需要為已有的HTML標(biāo)簽增加功能時(shí),使用屬性的方式創(chuàng)建指令
以上就是Angular指令之restict匹配模式的實(shí)例詳解,本站有關(guān)AngularJS 的文章還有很多,希望大家搜索查閱,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
分享題目:Angular指令之restict匹配模式的詳解
瀏覽地址:http://muchs.cn/article40/pieseo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)