AngularJS 指令除了基本了的 app、init、model、repeat我们还可以调用自己定义的指令,调用方式有四种:
E :元素名
A:属性
C:类名
M:注释
元素名
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="app"><test></test><script>
var app = angular.module("app", []);
app.directive("test", function () { return {
restrict: "E", //可省略,默认是EA,即元素名和属性
template: "这是自定义的通过元素名调用"
}
})</script></body></html>//这是自定义的通过元素名调用属性
<body ng-app="app"><div test></div><script>
var app = angular.module("app", []);
app.directive("test", function () { return {
restrict: "A", //可省略,默认是EA,即元素名和属性
template: "这是自定义的通过属性调用"
}
})</script></body>//这是自定义的通过属性调用类名
<body ng-app="app"><div class=" test"></div><script>
var app = angular.module("app", []);
app.directive("test", function () { return {
restrict: "C",
template: "这是自定义的通过类名调用"
}
})</script></body>//这是自定义的通过类名调用注释
<body ng-app="app"> <!-- directive: test -->
<script>
var app = angular.module("app", []);
app.directive("test", function () { return {
restrict: "M",
replace : true,
template: "<h1>这是自定义的通过注释调用</h1>"
}
})</script></body>//这是自定义的通过注释调用PS:一定要在 test 左右留空格;
作者:H_婷
链接:https://www.jianshu.com/p/8e5109c67a2a
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦