Question

我想编写一个指令来处理依赖于ng-flow的文件上传（文件的base64）我能够在不使用ngModel（将f绑定到scope.f：P）的情况下使指令工作，但由于我需要在表单中使用此指令，因此最好使用它（以及使用ng-change的可能性）是一个非常好的功能）

angular.module('webappApp.common.directives',['flow','pascalprecht.translate', 'tmh.dynamicLocale']).
directive('ngBase64FileUpload',function(){
    return {
        restrict: 'A',
        templateUrl: 'common/partials/base64FileUpload.tpl.html',
        require: '^ngModel',
        scope:{
            blur:'&fieldBlur',
            focus:"&fieldFocus",
            filename:"="

        },
        link: function (scope, element, attrs, ctrl) {
            console.log(scope);
            scope.processFiles = function (files) {
                console.log(files);
                var flowFile=files[0];
                //angular.forEach(files, function (flowFile, i) {
                    var fileReader = new FileReader();
                    fileReader.onload = function (event) {
                        var f ={};
                        //var f=event.target.result;
                        f.uri=event.target.result;
                        f.size=flowFile.size;
                        f.filename=flowFile.name;
                        ctrl.$setViewValue(f);
                    };
                    fileReader.readAsDataURL(flowFile.file);
                //});
            }
        }
    }
});

模板是

<div class="input-group col-xs-12" flow-init="{singleFile:true}" flow-files-added="processFiles($files)">
 <p class="input-pos-field form-control no-border nomargin" ng-if="!f"> {{filename|translate}}</p>
 <p class="input-pos-field form-control no-border nomargin" ng-if="f"> <a ng-href="{{f.uri}}" download>{{f.filename|translate}}</a></p>
<span class="input-group-btn">
    <button type="button" class="icon_file" flow-btn><img src="images/file_icon.png" width="30"/><input ng-blur="blur($event)" ng-focus="focus($event)" type="file" class="hide"></button>
</span>

在使该指令工作后，我还必须添加＆＃34; readonly＆＃34;选项只是简单地允许下载文件，如果我理解如何改变一点模板（按钮图像）

我发现了一些关于如何正确使用ngModel / parser / formatter / viewValue来编写灵活且可重用的指令的问题

----编辑指令似乎现在正在工作，但我有问题处理相关模板（显示文件名或默认，如果没有上传文件）我必须做的下一步是改变行为如果ng-disabled被传递（或只读，但是第一次，第二次几乎等于）基本上指令需要在按钮中使用不同的图标（并且不允许上传文件，但只下载它） plunker

Answer 1

使用ngModel.$render函数接受读取分配给模型的值并相应地更新指令状态或UI。当您想要推送到模型的新值时，请调用ngModel.$setViewValue。

例如：

scope.f = null;

ctrl.$render = function(){
    scope.f = angular.copy(ctrl.$viewValue);
};

scope.processFiles = function (files) {
    console.log(files);
    var flowFile=files[0];
    //angular.forEach(files, function (flowFile, i) {
    var fileReader = new FileReader();
    fileReader.onload = function (event) {
        var f ={};
        //var f=event.target.result;
        f.uri=event.target.result;
        f.size=flowFile.size;
        f.filename=flowFile.name;

        ctrl.$setViewValue(f);
    };
    fileReader.readAsDataURL(flowFile.file);
    //});
}

我使用angular.copy来创建对象的副本，以确保在指令中更改对象的属性不会导致更改显示在指令之外。只有在调用$setViewValue时，更改才会传播出指令。

angularjs自定义指令fileupload base64

1 个答案: