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)文章
詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題
下面小編就為大家?guī)?lái)一篇詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
依賴注入(DI -- Dependency Injection)是一種重要的應(yīng)用設(shè)計(jì)模式。Angular里面也有自己的DI框架，在設(shè)計(jì)應(yīng)用時(shí)經(jīng)常會(huì)用到它，它可以我們的開(kāi)發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過(guò)在類上添加@Injectable裝飾器來(lái)告訴系統(tǒng)這個(gè)類(服務(wù))是可注入的。2021-05-05
今天小編就為大家分享一篇Angular2之二級(jí)路由詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了js常用正則表達(dá)式集錦，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
angularjs ui-router中路由的二級(jí)嵌套
本篇文章主要介紹了angularjs ui-router中路由的二級(jí)嵌套，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
AngularJS基于MVC的復(fù)雜操作實(shí)例講解
下面小編就為大家分享一篇AngularJS基于MVC的復(fù)雜操作實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
這篇文章主要介紹了AngularJS自定義指令實(shí)現(xiàn)面包屑功能,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Angular頁(yè)面間切換及傳值的四種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11