一、今天完成的事：

1.实现新增和编辑列表的页面跳转；

2.熟悉富文本编辑器，引用富文本编辑器正常；

3.添加上传图片按钮的判断，点击上传后，上传按钮禁止点击；

4.添加删除功能，删除后将图片预览的一块清空；

5.实现新增功能，新增列表请求正常，列表渲染正常；

6.实现编辑功能，点击编辑后发送请求正常，将回复的数据渲染出来；

二、明天的计划：

1.将富文本编辑器的内容取出来发到服务器；

2.将编辑页面的type显示正常；

三、遇到的问题：

1.富文本编辑器内容无法获取发给后台，明天在研究一下富文本编辑器的提取内容；

2.编辑时的tyep无法显示，询问师兄说需要用ng-options显示，明天学习一下；

3.编辑页面，请求接口时，需要将id获取，但是页面跳转后的id无法取到，询问师兄后发现需要将id先放到跳转页的url中，再能通过$stateParams提取；

四、收获：

1、新增页面和编辑页面跳转，编辑的时候需要带参数跳转；编辑页面需要将id获取，然后渲染页面；

id = $stateParams.id;
$http({
    method: 'get',
    url: '/carrots-admin-ajax/a/article/' + id
}).then(function successCallback(response) {
    $scope.addParams = response.data.data.article;
    $scope.src = $scope.addParams.img;

2.新增的时候，将编辑的内容获取到后放到一个对象中，请求后将所有东西发给后台；成功后跳转列表页；

$scope.upload = function (x) {
    $scope.addParams.status = x;
    $scope.addParams.img = $scope.src;
    $scope.addParams.content = "";
    $http({
        method: 'post',
        url: '/carrots-admin-ajax/a/u/article',
        params : $scope.addParams
    }).then(function successCallback(response) {
        alert("新增成功!");
        $state.go("home.Article",{reload:true})

3.添加上传图片按钮的判断，点击上传后，上传按钮禁止点击；根据ng-disabled实现；

<button type="button" class="btn btn-success btn-xs" ng-click="uploadFile()" ng-disabled="show">
   <span class="glyphicon glyphicon-upload"></span>
   上传
</button>

判断上传图片的大小，因为服务器限制大小为2m以下；

if (evt.total >= 2000000) {
    alert("请上传小于2MB的图片")
}else {
    $scope.progress = Math.round((evt.loaded) * 100 / evt.total);
}

4.添加删除功能，删除后将图片预览的一块清空；

$scope.removeFile = function () {
    //由于ng-src会生成一个src的路径，所以删除的时候需要将ng-src和src都清空；
    var imgSrc = document.getElementById("src");
    imgSrc.src = "";
    $scope.src = "";
    $scope.file = "";
    $scope.progress = 0;
    $scope.show = false;
    $scope.hidden = false;
};

并且在二次上传图片的时候，在选择文件函数中添加功能，将之前的图片预览清空；

//更改上传的图片的时候，先将原来的图片预览清空，上传成功后再显示新上传的图片
var imgSrc = document.getElementById("src");
imgSrc.src = "";
$scope.src = "";

5.编辑页面传参的时候，需要将id传给url接收，之后才能通过$stateParams提取；

<button class="btn btn-xs btn-success" ng-click="addEdit(x.id)">编辑</button>

$scope.addEdit = function (id) {
    $state.go("home.addEdit",{id:id});
};

.state("home.addEdit", {
    url:"/addEdit?id",

在编辑页面的控制器中提取；

id = $stateParams.id;

最后请求参数并渲染页面