Angular指令之restict匹配模式的詳解
更新時間：2017年07月27日 14:54:43 投稿：lqh
這篇文章主要介紹了Angular指令之restict匹配模式的詳解的相關資料,這里對Angularjs 中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.屬性匹配（默認A）<div data-runn2></div>
3.樣式類匹配（C）<div class="runn2"></div>
4.注釋匹配（M）<!-- directive: runn2 -->
注意：directive前面需要有空格runn2后面需要有空格（這是一個小坑）
注釋匹配無法增加多個標簽例：template:"<h1>自定義指令</h1><h2>自定義指令</h2>" 會導致報錯
但是在<div><h1>自定義指令</h1><h2>自定義指令</h2></div>這樣包含標簽卻是正常的，小坑一個
注意：必須replace=true，否則注釋匹配無法使用
推薦使用元素和屬性的方式使用指令
當需要創(chuàng)建帶有自己的模板的指令時，使用元素名稱的方式創(chuàng)建指令
當需要為已有的HTML標簽增加功能時，使用屬性的方式創(chuàng)建指令
以上就是Angular指令之restict匹配模式的實例詳解，本站有關AngularJS 的文章還有很多，希望大家搜索查閱，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
下面小編就為大家?guī)硪黄斦刟ngularjs中路由頁面強制更新的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
依賴注入(DI -- Dependency Injection)是一種重要的應用設計模式。Angular里面也有自己的DI框架，在設計應用時經(jīng)常會用到它，它可以我們的開發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過在類上添加@Injectable裝飾器來告訴系統(tǒng)這個類(服務)是可注入的。2021-05-05
今天小編就為大家分享一篇Angular2之二級路由詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js常用正則表達式集錦，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了angularjs ui-router中路由的二級嵌套，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
Angularjs 動態(tài)改變title標題(兼容ios)
這篇文章主要介紹了 Angularjs 動態(tài)改變title標題(兼容ios)的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
下面小編就為大家分享一篇AngularJS基于MVC的復雜操作實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
AngularJS自定義指令實現(xiàn)面包屑功能完整實例
這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結(jié)合完整實例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了Angular頁面間切換及傳值的四種方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11