今天完成的事情：

之前写的angular翻页复杂啰嗦，今天尝试自定义指令封装。

明天的计划：

方案评审，写复盘页面。

遇到的问题：

1 分页指令的封装过程：

首先把html做成语义化标签，并把我们需要的变量暴露出来：

 <pagination page="page" max-page="maxPage" ng-click="pageTo()"></pagination>

 获取当前页和最大页数。pageTo()是父控制器绑定的函数，用于执行其余代码，不属于分页指令内部函数。然后对directive的各个属性进行设置。

app.directive('pagination', function() {
    return {
        //html
        template:
        '<div class="pagination">' +
        '<ul class="pager">' +
        '<li><a href="javascript:void(0)" ng-click="pageGo(1)">首页</a></li>' +
        '<li><a href="javascript:void(0)" ng-click="pagePre()">上一页</a></li>' +
        '</ul>' +
        '<ul>' +
        '<li ng-repeat="num in pageShowList" ng-class="{active: clickPage == num}">' +
        '<a href="javascript:void(0)" ng-click="pageGo(num)">{{num}}</a>' +
        '</li>' +
        '</ul>' +
        '<ul class="pager">' +
        '<li><a href="javascript:void(0)" ng-click="pageNext()">下一页</a></li>' +
        '<li><a href="javascript:void(0)" ng-click="pageGo(maxPage)">尾页:{{maxPage}}</a></li>' +
        '</ul>' +
        '</div>',
        //替换
        replace: true,

 html标签名字pagination必须要和js代码一致，而返回的属性template是我们的html代码，需要用字符串的方式拼接起来，replace属性为true，表示代码运行时需要把标签替换成template内的html代码。这样需要用到分页的页码只要引入pagination标签就可以了。

关键把当前页page和最大页数maxPage对外暴露。

//作用域
scope:{
    page: '=',  //等号是双向绑定
    maxPage: '@'
},

收获：以上