angular-directive

在angularJS中，指令起到了非常重要的作用，它可以定義重複呼叫的HTML模板，大大減少了HTML程式碼的冗餘。

下面是一個簡單的directive例項

  JS程式碼：
  var app = angular.module('myApp',[]);
    app.directive('header',function(){
      return {
        restrict: 'EA',
        replace: true,
        templateUrl:'header.html',
        scope:{
          title:'@'
        }
      }
    });
 

在該例子中，directive是建立模板的指令，它包含了兩個引數，
第一個引數是在HTML中呼叫該指令的名稱，第二個引數是一個函式，該函式返回了一個物件。
restrict屬性：該屬性可以設定該指令在HTML以何種形式被呼叫，
該屬性的可選值，
E：以元素的方式被呼叫，例如<header></header>；
A：以屬性的形式被呼叫，該值也是restrict屬性的預設值，例如：<div header></div>；
C：以類名的形式被呼叫，例如<div class=”header”></div>
M:以註釋的形式被呼叫，<!– header –>

templateUrl屬性：指定模板所在的路徑。

template屬性：在屬性內寫HTML的模板；
例如：template: ‘<span>模板</span>

replace屬性：若設定該值會true，則模板HTML會替換掉呼叫模板的HTML；若為false，則會在呼叫模板的HTML內嵌入。

scope屬性：該屬性會建立一個隔離作用域，在該作用域內，外部作用域無法訪問到該作用域外的資料。該屬性常用值：
‘=’ : 繫結一個常量資料，顯示到模板中，如上例子，只需在HTML中已該屬性的名字新增到HTML的屬性中即可。如<div header title=”abc”></div>
‘@’：繫結一個數據，通常用於繫結在input輸入框中，實現雙向繫結；
‘&’ ： 繫結一個函式。