首頁 > 開發者 > JavaScript
Angular指令之restict匹配模式的詳解，angularrestict
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，否則注釋匹配無法使用
推薦使用元素和屬性的方式使用指令
當需要建立帶有自己的模板的指令時，使用元素名稱的方式建立指令
當需要為已有的HTML標籤增加功能時，使用屬性的方式建立指令
以上就是Angular指令之restict匹配模式的執行個體詳解，本站有關AngularJS 的文章還有很多，希望大家搜尋查閱，感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
