如何在AngularJS指令中使用ui引导分页区域

我创建了一个指令来在表中显示数据。我想给这个添加分页。我使用它的方式如下：

app.directive('myTable', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {

            /** default variable */
            var fields  = scope[attrs.fields];
            var rows    = scope[attrs.rows];
            var currentElement = element; // if it remove element.replaceWith run just one time
            var pagination = { 
              current_page:1,
              from:1,
              last_page:1,
              next_page_url:null,
              per_page:10,
              prev_page_url:null,
              to:2,
              total:2
            };


            /** watch data change */
            scope.$watch(attrs.rows,function(newData) {
                rows = newData;
                fields  = scope[attrs.fields];
                if(rows){
                    pagination = newData.metadata;
                }
                scope.render(rows,fields);
            },true);

            /** Render HTML function */
            scope.render = function(rows,fields) {
                /** begin of table */
                var html = '<div class="res-table"><table class="table table-striped table-hover table-fixed ellipsis-table" ><thead><tr>';

                /** Create table header */
                angular.forEach(fields, function (item, index) {
                    html += '<th>' + item.field + '</th>';
                });
                html +='</tr></thead><tbody>';


                /** Create column and cell */
                angular.forEach(rows, function (row, index) {
                    html +='<tr>';

                    angular.forEach(fields, function (item, index) {
                        // if hasn't dot (.)
                        if(item.field.indexOf('.') === -1 ) {
                            html += '<td>' + row[item.field] + '</td>';
                        } else {
                            // split field by dot (.)
                            var splitFieldName = item.field.split('.');
                            // check if is array
                            if(Object.prototype.toString.call(row[splitFieldName[0]]) === '[object Array]'){
                                // iteration for field is array
                                var tmp = [];
                                angular.forEach(row[splitFieldName[0]],function (value, key) {
                                    tmp.push(value[splitFieldName[1]]) ;
                                });
                                html += '<td>' + tmp + '</td>';

                                // if it's null
                            }else if(row[splitFieldName[0]]===null) {
                                html += '<td>-</td>';
                            }else{
                                html += '<td>' + row[splitFieldName[0]][splitFieldName[1]] + '</td>';
                            }
                        }
                    });
                    html +='</tr>'
                });
                html +='</tbody></table></div>';

                /** pagination */
                console.log(pagination);
                html +='<div class="text-center"><uib-pagination total-items="'+ pagination.total +'" ng-model="' + pagination.current_page +'" max-size="5" class="pagination" boundary-links="true" rotate="false" ng-change="pageChanged(perPage)" items-per-page="' + pagination.per_page +'"></uib-pagination></div>';


                /** Replace in html */
                var replacementElement = angular.element(html);
                currentElement.replaceWith(replacementElement);
                currentElement = replacementElement;
            };

        }
    }
});

app.directive（'myTable'，函数（$compile）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
/**默认变量*/
变量字段=范围[attrs.fields]；
变量行=范围[attrs.rows]；
var currentElement=element；//如果它删除element.replaceWith，则只运行一次
变量分页={
当前页面：1，
发信人:1,，
最后一页：1，
下一页url:null，
每页：10，
上一页url:null，
致:2,，
总数：2
};
/**监视数据更改*/
作用域$watch（属性行，函数（newData）{
行=新数据；
字段=范围[attrs.fields]；
如果（行）{
分页=newData.metadata；
}
范围。渲染（行、字段）；
}，对）；
/**呈现HTML函数*/
scope.render=函数（行、字段）{
/**桌子的开头*/
var html=''；
/**创建表格标题*/
角度.forEach（字段、函数（项、索引）{
html+=''+item.field+''；
});
html+=''；
/**创建列和单元格*/
forEach（行，函数（行，索引）{
html+=''；
角度.forEach（字段、函数（项、索引）{
//如果没有点（）
if（item.field.indexOf（'.'）=-1）{
html+=''+行[项目.字段]+''；
}否则{
//按点分割字段（.）
var splitFieldName=item.field.split（'.'）；
//检查是否为数组
if（Object.prototype.toString.call（行[splitFieldName[0]]）=='[Object Array]'）{
//字段的迭代是数组
var tmp=[]；
angular.forEach（行[splitFieldName[0]]，函数（值，键）{
tmp.push（值[splitFieldName[1]]）；
});
html+=''+tmp+''；
//如果它是空的
}else if（行[splitFieldName[0]]==null）{
html+='-'；
}否则{
html+=''+行[splitFieldName[0]][splitFieldName[1]]+''；
}
}
});
html+=''
});
html+=''；
/**分页*/
console.log（分页）；
html+=''；
/**替换为html*/
var replacementElement=angular.element（html）；
currentElement.replaceWith（replacementElement）；
currentElement=替换元素；
};
}
}
});

我不知道其他指令中的$compile-to-compile angularjs指令。如何使用它

谢谢