angularjs的自定義指令及其呼叫方式
阿新 • • 發佈：2019-01-07
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>AngularJS 的自定義指令其實挺簡單，就是需要記住一點。
注意： 1. 需要駝峰命名。
2.呼叫自定義指令時，需要加 “-”。
呼叫指令的方式如下：
1.元素名 <自定義名></自定義名>
2.屬性 <div 自定義名></div>
3.類名 Class
4.註解 Comment
元素名 :
<runoob-directive></runoob-directive><div runoob-directive></div>註解 :<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->如何限制自定義指令的使用，或者選擇特定的方式呼叫指令：
通過新增 restrict 屬性,並設定值為 "A",
來設定指令只能通過屬性的方式來呼叫:
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定義指令!</h1>" }; });
restrict 值可以是以下幾種:
-
E作為元素名使用 -
A作為屬性使用 -
C作為類名使用 -
M作為註釋使用
restrict 預設值為 EA, 即可以通過元素名和屬性名來呼叫指令。
本文是根據angularjs API整理和自己體驗總結。如果不全，請看官方API。