Question

我目前陷入困境，情节是我想将指令绑定到我的HTML但没有任何作用我想用HTML绑定指令范围这就是我在做的事情：

这是我的指示，我想要的是将属性文件绑定到我的HTML，这样我就可以获得文件的名称和修改日期

.directive("fileinput", [function() {
        return {
            scope: {
                file: "=",
                filepreview: "="
            },
            link: function(scope, element, attributes) {
                element.bind("change", function(changeEvent) {
                    scope.file = changeEvent.target.files[0];
                    scope.filepreview='';

                    var reader = new FileReader();
                    reader.onload = function(loadEvent) {
                        scope.$apply(function() {
                            console.log(scope.file)//printing file value but not reflect in html

                            scope.filepreview = loadEvent.target.result;
                            var ctx = document.getElementById('myCanvas').getContext('2d');
                            ctx.clearRect(0, 0, 300, 130);
                            var img = new Image();
                            img.src = scope.filepreview ;
                            img.onload = function() {
                                ctx.drawImage(img, 0, 0);

                            }


                        });
                    }
                    reader.readAsDataURL(scope.fileinput);
                });
            }
        }
    }])

的index.html

<div class='form-group required'>
   <label>{{file.LastModified}}</label>
     <input type="file"  fileinput="file" filepreview="filepreview"/>


  </div>

当我上传文件时没有任何反应，但在指令中，我正在获取文件任何帮助将不胜感激。

Answer 1

你的指令范围有＆＃34; file＆＃34;对象，但你正在使用＆＃34; fileInput＆＃34;要获取该文件，您可以尝试下面的代码

<input type="file" fileinput file="file" filepreview="filepreview"/>

绑定指令属性到控制器不起作用

1 个答案: