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 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦