2013年5月7日星期二

AngularJS 語法樣式筆記

Ticore's Blog

AngularJS 標籤語法非常自由,能夠符合 HTML, XHTML 等樣式規範
具有多種寫法與樣式,可以寫成標籤、屬性、Class、註解...
看到後來也是搞不清楚到底有多少種可以用
所以想一次整理清楚,做個筆記

依據撰寫位置可以分為四種:

  1. Element:    <my-dir />
  2. Attribute:    <p my-dir="exp" />
  3. Class:    <p class="my-dir: exp;" />
  4. Comment:    <!-- directive: my-dir exp -->

依據撰寫風格又可以分為四種:

  1. None:    my-dir
  2. XML Namespace:    my:dir
  3. HTML5 Data:    data-my-dir
  4. XHTML:    x-my-dir

兩者之間基本上可以排列組合,但是又有幾個例外,做成對照表如下:

Element Attribute Class Comment
None <my-dir /> <p my-dir="exp" /> <p class="my-dir:exp;" /> <!-- directive: my-dir exp -->
XML Namespace <my:dir /> <p my:dir="exp" /> N/A N/A
HTML5 Data <data-my-dir /> <p data-my-dir="exp" /> <p class="data-my-dir:exp;" /> <!-- directive: data-my-dir exp -->
XHTML <x-my-dir /> <p x-my-dir="exp" /> <p class="x-my-dir:exp;" /> <!-- directive: x-my-dir exp -->

語法註解 my-dir: exp;
其中 my 表示 namespace
dir 表示 directive name
exp 表示 expression 表示式

可以看到 element 寫法是無法直接支援 exp 表示式的
因為通常 element 底下還會再包 child node

另外,註解型態的語法只能支援一個 directive + exp 而已

對於 AngularJS 內建 directive 來說,通常只有支援到 attribute, class 一兩種寫法而已
要測試的話得要自行宣告 directive 加上 restrict: "ECMA"

以下附一個通用 directive 範例,示範四種語法:

<!DOCTYPE HTML>
<html ng-app id="ng-app">
<head>
    <meta charset="UTF-8">
    <title ng-init="name='<AngularJS>';">{{name}}</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
    <script>

        var app = angular.module("ng");

        app.directive("myDir", function factory() {
            return {
                restrict: "ECMA",
                scope: true,
                template: "<span>{{exp}}</span>",
                replace: true,
                controller: function($scope) {
                    console.log("myDirCtrlFn();");
                },
                link: function(scope, element, attrs, ctrl) {
                    scope.$watch(attrs.myDir, function(value) {
                        scope.exp = value === undefined ? "[default]" : value;
                    });
                }
            };
        });

    </script>
</head>
<body>

    <h3>Element Directive:</h3>
    <p>
        &lt;my-dir /&gt; :
        <my-dir />
    </p>

    <h3>Attribute Directive:</h3>
    <p>
        &lt;span my-dir="exp" /&gt; :
        <span my-dir="'OK'" />
    </p>

    <h3>Class Directive:</h3>
    <p>
        &lt;span class="my-dir: exp;" /&gt; :
        <span class="my-dir:'OK';" />
    </p>

    <h3>Comment Directive:</h3>
    <p>
        &lt;!-- directive: my-dir exp --&gt; :
        <!-- directive: my-dir 'OK' -->
    </p>

</body>
</html>

JS Bin Code View


轉載請註明出處 http://ticore.blogspot.com/2013/05/angularjs-syntax-style-note.html

0 意見 :