angular指令，異步調用數據，監控數據的變化（自定義一個表頭的指令）

angular框架中提供了很多有效的指令，指令的目的就是為了提高代碼的復用率，提高工作效率。

下面我們自己來定義一個指令：

一點建議：寫指令名字的時候，盡量不要用用大寫，下划線等，否則會有很大的坑等着你來踩
指令文件的結構：
js/directives/table table.html table.js

table.js
define(['app'], function (myapp) {
    myapp
        .directive('dirtable', [function () {
            return {
                scope:{
                    "datasource": "=",
                    "option":"="
                },
                restrict: 'AE',
                templateUrl: 'js/directives/table/table.html',
                link: function (s, element, attrs) {
                //監聽值的改變，避免js執行順序的影響（特別的當存在異步加載數據的時候）
                    s.$watchGroup(['datasource','option'], function (n_value) {
                        if (n_value) {
                            s.add_item=n_value[0];
                            s.n_option=n_value[1];
                        }
                    })
                }
            }
        }])
})

table.html：
<table style="width:100%;">

    <thead>
        <tr class="">
            <th ng-repeat="titlename in n_option.title" width="{{titlename.wid}}"> {{titlename.name}}</th>
        </tr>
    </thead>
    <tbody>
    <tr ng-repeat="tmp in add_item track by $index">
        <td ng-repeat="title in n_option.title" width="title.wid">{{tmp[title.key]}}</td>
    </tr>
    </tbody>
</table>

控制器中代碼：

   s.asd=[];

   s.qwe={

      title:[

          {name:'序號',key:'order',wid:'97'},

          {name:'姓名',key:'realname',wid:'123'},

          {name:'手機號',key:'phone',wid:'150'},

          {name:'郵箱',key:'email',wid:'198'},

          {name:'角色',key:'rolename',wid:'142'},

          {name:'所屬部門',key:'departmentname',wid:'142'},

          {name:'創建人',key:'createduser',wid:'114'},

          {name:'創建時間',key:'created_at',wid:'160'},

          {name:'操作',key:'pno',wid:'228'},

             ]

   };

Html: <dirtable datasource="asd" option="qwe"></dirtable>