js程式碼

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

// 新增 controller
myApp.controller("myCtrl", function($scope) {
    $scope.customerName = "葡萄城控制元件";
    $scope.credit = 8800;
    $scope.saveChanges = function(source) {
        alert("儲存了來自" + source + "的變更");
    };
});

// 新增 directive
myApp.directive("myDir", function() {
  return {
    restrict:  "E",
    scope: {
      name: "@",   // name 值傳遞 （字串，單向繫結）
      amount: "=", // amount 引用傳遞（雙向繫結）
      save: "&"    // 儲存操作
    },
    template: 
      "<div>" +
      "  {{name}}: <input ng-model='amount' />" +
      "  <button ng-click='save()'>儲存</button>" +
      "</div>",
    replace: true,
    transclude: false,
   link: function (scope, element, attrs) {
        
        console.log("initial value for name:" + scope.name);
        console.log("initial value for amount:" + scope.amount);
        
        element.css("background", "yellow");

        scope.$watch("amount", function (newVal, oldVal) {
            console.log("amount has changed " + oldVal + " >> " + newVal);
        });
        

        scope.$watch("name", function (newVal, oldVal) {
            console.log("name has changed " + oldVal + " >> " + newVal);
        });
    }
  }
});
 

<bodyng-app="myApp" ng-controller="myCtrl">
<h3>普通的 Angular</h3>
    {{customerName}}:
    <input ng-model="credit" />
    <button ng-click="saveChanges(' [普通的Angular] ')">儲存</button>

    <h3>自定義指令</h3>
    <my-dir  name="{{customerName}}" amount="credit"
        save="saveChanges(' [自定義指令] ')">
    </my-dir>
</body>
 

1. restrict: 說明指令在HTML中的應用形式，備選項有"A"、"E" 和 "C"， "M" ，分別代表 attribute、element、class和comment（預設值為"A"）。我們將更多的關注attributes-如何建立UI元素。
2. scope: 建立指令的作用範圍，scope在指令中作為屬性標籤傳遞。Scope 是建立可以複用指令的必要條件，每個指令（不論是處於巢狀指令的哪一級）都有其唯一的作用域，它不依賴於父scope。scope 物件定義names 和types 變數。上面的例子即建立了3個scope變數。
   • name: "@" （值傳遞，單向繫結）：
     "@"符號表示變數是值傳遞。指令會檢索從父級scope中傳遞而來字串中的值。指令可以使用該值但無法修改，是最常用的變數。
   • amount: "=" （引用,雙向繫結）
     "="符號表示變數是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意型別的，包括複合物件和陣列。指令可以更改父級Scope中的值，所以當指令需要修改父級Scope中的值時我們就需要使用這種型別。
   • save: "&" (表示式)
     “&”符號表示變數是在父級Scope中啟作用的表示式。它允許指令實現比修改值更高階的操作。
3. template: 替代原始模板中的標記的字串。替換功能將替換所有舊元素為新值。注意template是如何使用Scope中定義的變數的。這允許你無需寫任何額外的程式碼即可建立macro-style 風格指令。replace: 說明是否替換原始標記中的值或是追加原始標記中的值。預設值是false，這時原始標記將被保留。
4. transclude: 說明自定義指令是否複製原始標記中的內容。例如，之前展示的“tab”指令設定了transclude 為 true，因為tab 元素包含其他HTML 元素。 "dateInput" 指令則需要在初始化時為空，所以需要設定transclude 為false。
5. link: 該方法在指令中扮演著重要的角色。它負責執行DOM 操作和註冊事件監聽器等。link 方法包含以下引數：
   • scope: 指令Scope的引用。scope 變數在初始化時是不被定義的，link 方法會註冊監視器監視值變化事件。
   • element: 包含指令的DOM元素的引用， link 方法一般通過jQuery 操作例項（如果沒有載入jQuery，還可以使用Angular's jqLite ）。
   • controller: 在有巢狀指令的情況下使用。這個引數作用在於把子指令的引用提供給父指令，允許指令之間進行互動，