基于angularJs+ui-router+bootstrap风格的表格生成指令

  1 /**     根据参数定制表格
 * api接口：
 *      form-model:[item1,item2,item3]
 *      form-properties:[
 *          {key:'',label:'',thClass:''},  key为item对象的key,label为该key对应的表头,thClass主要用于列少时平分一行
 *          ...
 *      ]
 *      对应一行后面的编辑，删除，详情按钮
 *      form-actions:{
 *          edit/delete/detail:{
 *              stateUrl:'',        对应点击该按钮后跳转的路由状态
 *              stateParams:[{
 *                  key:'',          用来拼接ui-router的sref-->({key:object.objectKey}),支持多参数传递。
 *                  objectKey:'',
 *              }]
 *          }
 *      }
 *示例
 *      <by-table tb-models="formModel" tb-properties="formProperties" tb-actions="formAction"></by-table>
 *
 *
 *

    model用于初始表格数据
    $scope.formModel = [
         {id:1,name:"张三",sex:'男'},
         {id:2,name:"李四",sex:'男'},
         {id:3,name:"王五",sex:'男'}
     ];

    thClass 主要用于珊格布局，控制其长度
     $scope.formProperties = [
         {key:'id',label:'ID'},
         {key:'name',label:'姓名','thClass':'col-md-3'},
         {key:'sex',label:'性别','thClass':'col-md-3'}
     ]

    配合而ui-route 完成到增删改查的路由跳转
     $scope.formAction = {
        //stateParams:
        //stateUrl({key:object.objectKey});
        //add 不需要stateUrl
        detail:{
            stateUrl:'person.detail',
            stateParams:{
                key:'id',
                objectKey:'id'
            }
        },
        edit:{
            stateUrl:'person.edit'
        },
        delete:{
            stateUrl:'person.delete'
        }
     }
 */


angular.module('testApp')
    .directive('byTable', function(){
        return{
            restrict: 'E',
            templateUrl:'scripts/components/form/form-template/table.html',
            scope:{
                tbModels:'=',
                tbProperties:'=',
                tbActions:'='
            },
            link:function ($scope,$elem,$attr){
                $scope.hasOper = false;
                var notNull = function (data){
                    return !!data;
                }

                //private action info
                $scope._tbActions = {
                    detail:null,
                    delete:null,
                    edit:null
                }

                // 必须传递一个数组
                //输入[{key1,value1},{key2,value2}],
                //输出key1:value1,key2:value2
                var getParams = function(datas){
                    console.log("....");
                    var arr_len = datas.length;
                    var res = "";
                    var i=0;
                    if(arr_len<=0){
                        return "";
                    }

                    res = datas[0].key +":tbModel." + datas[0].objectKey;
                    if(arr_len>1){
                        for(i=1;i<arr_len;i++){
                            res += (","+datas[i].key +":tbModel." + datas[i].objectKey);
                        }
                    }
                    return res;
                }

                //get sref str by config
                var getSref = function(dataObj){
                    var params = "";
                    var strtmp = "";
                    if(!dataObj.stateUrl){
                        return "";
                    }
                    if(dataObj.stateParams){
                        var tmp = getParams(dataObj.stateParams);
                        params = "({"+ tmp +"})";
                    }
                    strtmp = dataObj.stateUrl+ params;
                    return strtmp;
                }

                //initOperContain:'edit','delete','detail'
                var initOper = function(){
                    if($scope.tbActions.detail){
                        $scope._tbActions.detail = getSref($scope.tbActions.detail)
                    }
                    if($scope.tbActions.edit){
                        $scope._tbActions.edit = getSref($scope.tbActions.edit)
                    }
                    if($scope.tbActions.delete){
                        $scope._tbActions.delete = getSref($scope.tbActions.delete)
                    }
                    console.log($scope._tbActions.detail);
                }
                initOper();


                //the oper is show?
                if(notNull($scope.tbActions.edit)||notNull($scope.tbActions.delete)||notNull($scope.tbActions.detail)){
                    $scope.hasOper = true;
                }
            }
        }
    })