AngularJS 指令

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>"
    };
});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章