名稱	描述
compile	指定一個編譯函式
controller	為指令建立一個控制器函式
link	為指令指定連結函式
replace	指定模板內容是否替換指令所應用到的元素
require	宣告對某個控制器的依賴
restrict	指定指令如何使用ACEM
scope	為指令建立一個新的作用域或者一個隔離的作用域
template	指定一個將被插入到HTML文件的模板
templateUrl	指定一個將被插入到HTML文件的外部模板
transclude	指定指令是否被用於包含任意內容

 

.directive('unorderedList', function () {
    return {
        link: function (scope, element, attrs) {
            var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
            var propertyName = attrs['listProperty'] || "price || currency";
            if(angular.isArray(data)){
                var listElem = angular.element("<ul>");
                if(element[0].nodeName == "#comment"){
                    element.parent().append(listElem);
                }else{
                    element.append(listElem);
                }
                for(var i=0, len=data.length; i<len; i++){
                    var itemElem = angular.element('<li>').text(scope.$eval(propertyName, data[i]));
                    listElem.append(itemElem);
                }
            }
        },
        restrict:'EACM'
    };
});

如何使用指令

當作元素使用（E）

<unordered-list list-source="products" list-property="price | currency" />

        當unordered-list當作元素使用，需要新增另外的屬性代替unordered-list屬性的作用。

var data = scope[attrs['unorderedList'] || attrs['listSource'] ];

當作屬性使用（A）

<div unordered-list="products" list-property="price | currency"></div>

當作類的屬性值使用（C）

<div class="unordered-list: products" list-property="price | currency"></div>

當作註釋使用（M）

<!-- directive: unordered-list products  -->

使用模板指令

.directive('unorderedList', function () {
    return {
        link: function (scope, element, attrs) {
            scope.data = scope[attrs['unorderedList']];
        },
        restrict: 'A',
        template:"<ul><li ng-repeat='item in data'>{{item.price | currency}}</li></ul>"
    };
});

使用函式作為模板

        template屬性除了使用字串，也可以指定一個函式來生成模板化的內容。該函式傳入兩個函式（指令所應用到的元素以及屬性集合）並返回將被插入到文件中的HTML程式碼片段。

<script type="text/javascript" id="listTemplate">
    <ul>
        <li ng-repeat="item in data">{{item.price | currency}}</li>
    </ul>
</script>
<script>
var myApp = angular.module('myApp', [])
 
    .controller('myCtrl', ["$scope", function ($scope) {
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
        ];
    }])
        .directive('unorderedList', function () {
            return {
                link: function (scope, element, attrs) {
                    scope.data = scope[attrs['unorderedList']];
                },
                restrict: 'A',
                template:function () {
                    return angular.element(
                            document.querySelector("#listTemplate")
                    ).html();
                }
            };
        });
</script>

使用外部模板

itemTemplate.html

<p>This is the form the template file</p>
<ul>
    <li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>

.directive('unorderedList', function () {
    return {
        link: function (scope, element, attrs) {
            scope.data = scope[attrs['unorderedList']];
        },
        restrict: 'A',
        templateUrl:"itemTemplate.html"
    };
});

通過函式選擇一個外部模版

tableTemplate.html

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data">
            <td>{{item.name}}</td>
            <td>{{item.price | currency}}</td>
        </tr>
    </tbody>
</table>

<div unordered-list="products" template="table" class="table table-striped">
    This is where the list will go
</div>

.directive('unorderedList', function () {
    return {
        link: function (scope, element, attrs) {
            scope.data = scope[attrs['unorderedList']];
        },
        restrict: 'A',
        templateUrl: function (elem, attrs) {
            return attrs['template'] == "table" ? "tableTemplate.html" : "itemTemplate.html";
        }
    };
});

        table-striped樣式並沒有起作用，設定replace屬性為true後的效果是模版內容將替換掉指令所應用到的div元素。

管理指令的作用域

為每個指令例項建立自己的作用域

        設定scope屬性為true將允許我們在同一個控制器裡複用這個指令,可以避免指令共享資料值。

<div class="panel panel-default">
   <div  class="panel-body" scope-demo></div>
    <div  class="panel-body" scope-demo></div>
</div>

var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
    $scope.data = {name:"Staven"};
    $scope.city = "China"
}])
.directive('scopeDemo', function () {
    return {
       template: function () {
           return angular.element(document.querySelector("#scopeTemplate")).html();
       },
        scope:true
    };
});

        data.name這個屬性是在一個物件上定義的，意味著這個值將會在指令的哥哥例項之間所共享，而且所有相應的檢視會同步更新。

        city是直接在控制器的作用於上被直接賦值的，意味著這個值只在此指令的作用域上有效。

建立隔離的作用域

        對於在一個物件上定義的屬性，可能會被其他人改變。解決方法就是建立一個隔離的作用域，就是Angularjs為指令的每個例項建立一個獨立的作用域的地方，但是這個作用域並不繼承自控制器的作用域。當scope定義屬性被設定為一個物件時，可建立一個隔離的作用域。隔離的作用域的最基本型別是用一個沒有屬性的物件表示。

.directive('scopeDemo', function () {
    return {
       template: function () {
           return angular.element(document.querySelector("#scopeTemplate")).html();
       },
        scope:{}
    };
});

        當建立在不同情況下複用的指令時，隔離的作用域是一種重要的構件時。因為它防止了在控制器作用域和指令之間出現了意料外的互動。但是完全隔絕一個指令會使得難以輸入和輸出資料。

        隔絕的作用域允許使用應用於指令旁邊的元素上的屬性將資料值繫結到控制器作用域上。

單向繫結@：

        向以@為字首的作用域物件上增添一個屬性，以在一個隔離的作用力建立一個單向繫結。

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="panel panel-default">
       <div class="panel-body">
           Direct Binding:<input ng-model="data.name" />
       </div>
        <div class="panel-body" scope-demo nameprop="{{data.name}}"></div>
    </div>
</body>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Data Value:{{local}}</p>
    </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
    $scope.data = {name:"staven"};
}])
.directive('scopeDemo', function () {
    return {
       template: function () {
           return angular.element(document.querySelector("#scopeTemplate")).html();
       },
        scope:{
           local:"@nameprop"
        }
    };
});
</script> 

        local屬性的值以@為字首，制定了屬性local的值應該從一個來自名為nameprop的特性的單向繫結來獲得。

        使用一個隔離的作用域使得指令不會繼承控制器作用域中的資料。

雙向繫結=：

        向以=為字首的作用域物件上增添一個屬性，以在一個隔離的作用域裡建立一個雙向繫結。

        在隔離作用於上的單向繫結總是被計算作字串值，如果想訪問一個陣列，就必須使用雙向繫結。

<div class="panel panel-default">
   <div class="panel-body">
       Direct Binding:<input ng-model="data.name" />
   </div>
    <div class="panel-body" scope-demo nameprop="data.name"></div>
</div>

<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Data Value:<input ng-model="local" /></p>
    </div>
</script>
<script>
    scope:{
       local:"=nameprop"
    }
</script>

        使用單向繫結時，提供了一個被"{{"和"}}"字元所包圍的繫結表示式，但是angularjs需要知道在雙向繫結中哪個屬性需要被更新，所以不需要被"{{"和"}}"包圍。

計算表示式&：

        向以&為字首的作用域物件上增添一個屬性，在父作用域的上下文計算一個表示式。

<body ng-app="myApp" ng-controller="myCtrl">
<div class="panel panel-default">
   <div class="panel-body">
       Direct Binding:<input ng-model="data.name" />
   </div>
    <div class="panel-body" scope-demo city="getCity(data.name)" nameprop="data.name"></div>
</div>
</body>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Name:{{local}}, City:{{cityFn()}}</p>
    </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
    $scope.data = {name:"staven",defaultCity:"hefei"};
    $scope.getCity = function (name) {
        console.log(1);
        return name == 'staven' ? $scope.data.defaultCity : "Unknown";
    }
}])
.directive('scopeDemo', function () {
    return {
       template: function () {
           return angular.element(document.querySelector("#scopeTemplate")).html();
       },
scope:{
    local:"=nameprop",
    cityFn:"&city"
}
    };
});
</script>

        呼叫cityFn()時，使用了圓括號，要計算被這個特性所指定的表示式，這是必需的，即使當表示式本身就是一個函式呼叫時。

使用隔離作用域的資料來計算一個表示式

        可以將來自代計算的隔離作用域的資料為控制器作用域表示式的一部分。

<div class="panel-body" scope-demo city="getCity(nameVal)" nameprop="data.name"></div>

<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Name:{{local}}, City:{{cityFn({nameVal: local})}}</p>
    </div>
</script>