今天完成的任务：

写完了任务8的分页并进行了封装：

//自定义翻页指令
mainApp.directive("myFlip", function() {
    return {
        restrict: "EA",
        replace: true,
        scope: {
            conf: "="
        },
        template: '<div class="footer clearfix">' +
        '<ul class="pagination" ng-show="conf.totalItems > 0">' +
        '<li class="pagnum_t" style="margin-right: 20px">' +
        '每页显示<input type="text" class="footer_input" ng-model="conf.itemsPerPage" ' +
        'ng-change="changeItemsPerPage()">条' +
        '</li>' +
        '<li class="pagnum" ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()">‹</li>' +
        '<li class="pagnum" ng-repeat="item in pageList track by $index" ' +
        'ng-class="{active: item == conf.currentPage, separate: item == \'···\'}" ' +
        'ng-click="changeCurrentPage(item)">{{ item }}' +
        '</li>' +
        '<li class="pagnum" ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()">›</li>' +
        '<li class="pagnum_t">去第<input class="footer_input" type="text" ng-model="jumpPageNum">页</li>' +
        '<li class="pagnum" ng-click="jumpToPage()">确定</li>' +
        '</ul>' +
        '<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
        '</div>',
        link: function(scope) {
            var conf = scope.conf;
            // 默认每页的个数
            var defaultPerPage = 10;
            // pageList数组
            function getPagination() {
                // conf.currentPage
                if(conf.currentPage) {
                    conf.currentPage = parseInt(scope.conf.currentPage, 10);
                }
                // conf.currentPage? conf.currentPage = parseInt(scope.conf.currentPage, 10) : '';
                if(!conf.currentPage) {
                    conf.currentPage = 1;
                }
                // conf.totalItems
                if(conf.totalItems) {
                    conf.totalItems = parseInt(conf.totalItems, 10);
                }
                // conf.totalItems
                if(!conf.totalItems) {
                    conf.totalItems = 0;
                }
                // conf.itemsPerPage
                if(conf.itemsPerPage) {
                    conf.itemsPerPage = parseInt(conf.itemsPerPage, 10);
                }
                if(!conf.itemsPerPage) {
                    conf.itemsPerPage = defaultPerPage;
                }
                // 分页总数
                conf.numberOfPages = Math.ceil(conf.totalItems/conf.itemsPerPage);
                // 如果分页总数>0，并且当前页大于分页总数
                if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){
                    scope.conf.currentPage = scope.conf.numberOfPages;
                }
                // 页码相关
                scope.pageList = [];
                if(conf.numberOfPages <= conf.pagesLength){
                    // 判断总页数如果小于等于分页的长度，若小于则直接显示
                    for(i =1; i <= conf.numberOfPages; i++){
                        scope.pageList.push(i);
                    }
                }else{
                    // 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
                    // 计算中心偏移量
                    var offset = (conf.pagesLength - 1) / 2;
                    if(conf.currentPage <= offset){
                        // 左边没有...
                        for(i = 1; i <= offset + 1; i++){
                            scope.pageList.push(i);
                        }
                        scope.pageList.push('···');
                        scope.pageList.push(conf.numberOfPages);
                    }else if(conf.currentPage > conf.numberOfPages - offset){
                        scope.pageList.push(1);
                        scope.pageList.push('···');
                        for(i = offset + 1; i >= 1; i--){
                            scope.pageList.push(conf.numberOfPages - i);
                        }
                        scope.pageList.push(conf.numberOfPages);
                    }else{
                        // 最后一种情况，两边都有...
                        scope.pageList.push(1);
                        scope.pageList.push('···');

                        for(i = Math.ceil(offset / 2) ; i >= 1; i--){
                            scope.pageList.push(conf.currentPage - i);
                        }
                        scope.pageList.push(conf.currentPage);
                        for(i = 1; i <= offset / 2; i++){
                            scope.pageList.push(conf.currentPage + i);
                        }
                        scope.pageList.push('···');
                        scope.pageList.push(conf.numberOfPages);
                    }
                }
                scope.$parent.conf = conf;
            }
            getPagination();
            // prevPage
            scope.prevPage = function() {
                if(conf.currentPage > 1){
                    conf.currentPage -= 1;
                }
                getPagination();
            };
            // nextPage
            scope.nextPage = function() {
                if(conf.currentPage < conf.numberOfPages){
                    conf.currentPage += 1;
                }
                getPagination();
            };
            // 变更当前页
            scope.changeCurrentPage = function(item) {
                if(item == '···'){
                    return;
                }else{
                    conf.currentPage = item;
                    getPagination();
                }
            };
            // 修改每页展示的条数
            scope.changeItemsPerPage = function() {
                // 一旦展示条数变更，当前页将重置为1
                conf.currentPage = 1;
                getPagination();
            };
            // 跳转页
            scope.jumpToPage = function() {
                num = scope.jumpPageNum;
                if(num.match(/\d+/)) {
                    num = parseInt(num, 10);

                    if(num && num != conf.currentPage) {
                        if(num > conf.numberOfPages) {
                            num = conf.numberOfPages;
                        }
                        // 跳转
                        conf.currentPage = num;
                        getPagination();
                        scope.jumpPageNum = '';
                    }
                }
            };
            scope.$watch('conf.totalItems', function() {
                getPagination();
            })
        }
    }
});

2.学习了$watch：

$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子：

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

        console.log(newValue);

        console.log(oldValue);

});

$timeout(function(){

        $scope.name = "world";

},1000);

$watch性能问题

太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：

var watch = $scope.$watch('someModel.someProperty', callback);

//...

watch();

还有2个和$watch相关的函数：

$watchGroup(watchExpressions, listener);

$watchCollection(obj, listener);

明天计划的事情：

继续任务8，写搜索的部分

遇到的问题：

已经在杨泽平师兄的指导下解决了

收获：

如何自定义指令，大致的流程模板心里都有数了。