.find at element.find() 抛出“未定义不是函数” - AngularJS，文件上传答案

【问题标题】：.find at element.find() throws "undefined is not a function" - AngularJS, File upload.find at element.find() 抛出“未定义不是函数” - AngularJS，文件上传
【发布时间】：2014-10-08 06:05:20
【问题描述】：

我正在尝试在我的练习项目中实现图像上传和保存到数据库功能。我为模式元素创建了一个对话框模式和 3 个不同的指令：一个用于文本输入，第二个用于选择（下拉），第三个用于文件上传。我在上传文件时遇到问题，因为浏览器在 var input = element.find("input")[0];

的 .find 上报告“未定义不是函数”错误

我有这个 AngularJS 指令，看起来像这样。

collectionsApp.directive('formFileUpload', [function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            name: '@',
            fileread: '='
        },
        templateUrl: '/directives/formFileUpload.html',
        link: function(scope, attrs, element) {
            var input = element.find("input")[0];
            input.addEventListener("change", function(changeEvent){
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            })

        }
    }
}]);

我有这个 formFileUpload.html 来替换指令：

<div class="form-group">
    <label for="inputFile" class="col-sm-2 control-label">{{name}}</label>
    <div class='col-sm-3'>
        <input type="file">
    </div>
</div>

当我向模态体添加指令时，我会这样添加：

<form-file-upload name="Book Cover Image" fileread="file"></form-file-upload>

现在，请记住，我打算将此图像转换为 base64，将其存储为对象的属性并将其发送到 db。

【问题讨论】：

.find 不是 DOM 节点上可用的方法，所以它是 undefined。我想你的意思是，.getElementsByTagName() 或者 querySelectorAll()。
即使我使用 element.getElementsByTagName('input') 或 querySelectorAll('input')，我仍然会收到相同的错误消息 - undefined 不是函数...
添加 console.log(element) 以确保它是您认为的那样 - 下面的答案表明您的参数顺序错误。

标签： javascript html angularjs model-view-controller base64

【解决方案1】：

我认为您将参数传递给链接函数的顺序错误。

应该是：

link : function(scope, element, attrs)

不是：

link : function(scope, attrs, element)

【讨论】：