发表于: 2017-10-25 21:49:30

1 608


今天完成的事情:

完成了任务九,将图片上传部分拆分为组件

明天计划的事情:

开始任务十的学习

遇到的问题:

初步学会了自定义简单的指令,不过怎样使自定义指令实现双向绑定,怎样定义可复用的指令,怎样定义指令的作用域等还需要继续深入学习,感觉自定义指令真的很好很强大

收获:

怎样定义一个图片上传指令

1.angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。

2.内置指令,打包在AngularJs内部的指令,所有内部指令的命名空间 都使用ng作为前缀,3.所以在写自定义指令的时候,避免用ng作为指令命名的前缀。

4.创建指令的方式有四种,在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释

5.向指令中传递数据,用template属性


明确组件的功能:

1.点击按钮上传图片
2.图片能在本地预览
3.显示图片信息,显示上传进度
4.点击上传按钮上传到服务器
5.点击删除按钮,删除。
6.上传按钮只能按一次


编写组件模板:

这里建议采用ng-template的方式可以减少一次http请求

将组件的模板写在

<script type="text/ng-template" id="xxx.html">

</script>

之间

在自定义指令的templeUrl中填写对应的ID “xxx.html”


app.directive("taoge",function($http){
    return {
        restrict: "AEC",
        replace: true,
        templateUrl: "img.html",
        link: function(scope,ele,attr){
                
                scope.progress = "0";//初始化进度条的值
                scope.fileChanged = function(e) {
                    scope.imgFile = e;//获取input图片框
                    scope.$apply();
                }
                scope.picLoad = function() {
                    var formData = new FormData();
                    formData.append("file",scope.imgFile.files[0]);    
                    $http({
                        method: "POST",
                        url: "/carrots-admin-ajax/a/u/img/task",
                        headers: {"content-type": undefined},
                        data: formData,
                        uploadEventHandlers:{
                            progress: function(e) {
                                scope.progress = Math.round(e.loaded * 100 / e.total);
                            }
                        },
                    }).then(function successCallback(response){
                                scope.backMsg = "√";
                                   scope.picUrl = response.data.data.url;
                                scope.upDisabled = true;
                            },function errorCallback(response) {
                                scope.backMsg = "×";
                                scope.upDisabled = true;
                            })
                }
                scope.delete = function() {
                    scope.picUrl = " ";
                    scope.progress = "0";
                    scope.upDisabled = false;
                    scope.backMsg = "";
                    scope.imgFile = null;
                }
              }
    }
})



返回列表 返回列表
评论

    分享到