AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
ng-repeat 指令會重複一個 HTML 元素:
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<li data-ng-repeat="x in names">
{{x}}
</li>
</ul>
</div>
創建自定義的指令
除了 AngularJS 內置的指令外,我們還可以創建自定義指令。
你可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令,HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令, runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
可以通過 元素名,屬性,類名,註釋來使用。
通過添加 restrict 屬性,並設置值爲 "A"
, 來設置指令只能通過屬性的方式來調用:
restrict 值可以是以下幾種:
E
作爲元素名使用A
作爲屬性使用C
作爲類名使用M
作爲註釋使用
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});