今天完成的任务：

如何实现一个简单的分页组件，这个分页组件应该有以下这几个变量：

• begin：起始页数，这里是10.
• currentPage：当前页，我们这里，当前页等于begin。
• endpage：html页面中最后一个分页按钮的数字。
• showPages：html页面中最多能出现几个分页按钮。
• totalPages:页数总数，这里是20

这四个变量的关系很简单:

    var begin=10;    var currentPage=begin;    var showPages=5;    var end=begin+showPages;    for(var i=begin;i<end;i++){        console.log(i);//10，11，12，13，14
    }

现在我们把这段代码封装成一个函数，将currentPage和showPages作为变量抽象出来。

    function slicePage(currentPage,showPages) {        var begin=currentPage;        var end=begin+showPages;        for(var i=begin;i<end;i++){            console.log(i);
        }
    }
    slicePage(5,5);

特殊情况时

假设页面上的数据只有3页，设置的翻页页数按钮有5个。那么上面的代码就会出现问题，会多显示4，5这2个按钮。所以我们需要对end进行验证。

    var totalPages=3;    function slicePage(currentPage,showPages) {        var begin=currentPage;        var end=begin+showPages;        if(end>totalPages){
            end=totalPages;
        }        for(var i=begin;i<end;i++){            console.log(i);
        }
    }
    slicePage(1,5);//1,2,3

如果我们传的参数是1的话，那么结果是1，2，3.看上去没什么问题，但是当我们传的参数是2的时候，打印出来的结果却是2，3.按照常理来讲没，此时页面上应该保持数量不变，结果应该还是1，2，3。只不过currentPage变成了2而已。所以我们还需要对begin进行验证。

    if(end>totalPages){
            end=totalPages+1;
            begin=end-showPages;
            begin=begin>0?begin:1;
        }

现在我们再来测试一下

    var totalPages=3;    function slicePage(currentPage,showPages) {        var begin=currentPage;        var end=begin+showPages;        if(end>totalPages){
            end=totalPages+1;
            begin=end-showPages;
            begin=begin>0?begin:1;
        }        for(var i=begin;i<end;i++){            console.log(i);
        }
    }
    slicePage(2,5);//1,2,3

在这种情况下，结果都是正常的。但是并没有结束，我们还要对当前页在开始，中间，结尾部分这几种情况进行测试。

    var totalPages=20;
    slicePage(1,5);//1,2,3,4,5
    slicePage(10,5);//10,11,12,13,14
    slicePage(17,5);//16,17,18,19,20
    slicePage(20,5);//16,17,18,19,20
    totalPages=3;
    slicePage(2,5);//1，2，3

经过测试，发现我们打印出来的结果都是正确的，至此，生成页面上按钮个数和按钮页数的函数已经写好了。

富文本angualr的写法：

app.directive('contenteditable', function() {
return {
restrict: 'A' ,
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// 创建编辑器
        var editor = new wangEditor('editor-trigger');
editor.onchange = function () {
// 从 onchange 函数中更新数据
           scope.$apply(function () {
var html = editor.$txt.html();
ctrl.$setViewValue(html);
});
};
editor.create();
}
};
});

在html中是这样写的：

<div id="editor-trigger" ng-model="vm.artParams.content" contenteditable="true">
</div>

有现成的是很好用，不过还是要测试一下，看看曲线是否平滑

双向绑定后，发生了什么事情？

当数据发生改变后，执行$apply

$apply使改变的事件进入angular context执行环境

在执行环境中执行$watch，$digest会遍历所有$watch，直到所有$watch都没有变化，这个就是所谓的dirty-check

每次输入，都会重复以上循环，这时我们界面的操作实时的反应到了数据，数据的变化实时展现在界面，就实现了双向绑定

明天要做的事情：

撸代码，做任务，提速

遇到的问题：

思路和框架都理清楚了，就是代码不熟练，这个是无法绕过去的点啊，要是有一种方法可以机械记忆什么的就太好了

收获：

分页、富文本知识点，熟悉代码