AngularJS 教學 - Element Directives

本篇介紹一下幾個常用的 AngularJS Directives，建議可以先看 AngularJS 教學 - Templates

AngularJS 教學 - Templates 提到了幾個好用的 Template Directives，

而接下來要介紹的 Directives 主要是用來對 HTML 元素做動態修改或是 CSS 調整

以下我依序分享這些好用的 Directives

• ng-if

          從字面上就知道這是要用來做什麼啦，ng-if 屬性接受一個布林值，如果是 true 的話

          那 ng-if 的標籤內容就會顯示出來，範例如下：

          <span ng-if="flag">Flag is True</span>

      <span ng-if="!flag">Flag is False</span>

 

• ng-show & ng-hide

          這也是一個蠻明顯易用的 Directive 拉，跟 ng-if 一樣是接受一個布林值，ng-show

          為 true 時會顯示反之則不顯示，至於 ng-if 同樣道理，範例如下：

      <span ng-hide="flag">Hide</span>

      <span ng-show="flag">Show</span>

• ng-class 

          目地是用來設定元素的 CSS class，直接看範例吧：

          <script>

              var demoApp = angular.module("demoApp", []);

              demoApp.controller("demoCtrl", function($scope){

                  $scope.class = {

                     green: "FONT_GREEN",

                     blue: "FONT_BLUE"

                  };

                  $scope.getSpecClass = function(){

                     return "COMMAND";

                  };

             });

      </script>

      <style>

              span.FONT_GREEN {color: green; }

              span.FONT_BLUE {color: blue; }

              span.COMMAND {background-color: black; color: white;}

      </style>

          <div ng-controller="demoCtrl">

              <span ng-class="class.green">Hello World</span>

              <br/>

              <span ng-class="class.blue">Hello World</span>

              <br/>

              <span ng-class="getSpecClass()">Hello World</span>

              <br/>

      </div>

          可以注意到從上述到現在，這些 directive 屬性所能接受的都是一個 Expression，

          例如 ng-if 需要一個布林值，你也可以是一個呼叫 function 並回傳布林值的 Expression 喔~

• ng-style

         相信這也不用多說拉，就是類似 HTML 的 style 屬性囉!

         $scope.styles = {

         bgcolor: "red",

         color: "white"

     };

     .....

     <p ng-style="{'background-color': styles.bgcolor;}">Hello World</p>

之後再來介紹一些 AngularJS 的事件處理吧