1

我想编写一个指令来处理依赖于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>

在使该指令正常工作后，我还必须添加“只读”选项，如果我了解更改一些模板（按钮图像）会很好，仅允许很好地下载文件

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

---- 编辑指令现在似乎正在工作，但我无法正确处理模板（如果没有上传文件，则显示文件名或默认值）我必须做的下一步是在 ng-disabled 时更改行为已通过（或只读但第一个第二个几乎等于）基本上该指令需要在按钮中使用不同的图标（并且不允许上传文件，但只能下载它） plunker

4

1 回答 1

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更改仅应在被调用时传播出指令。

于 2016-05-16T18:31:02.617 回答