Question

我正在学习angularJS v1.5.5，并且正在尝试为文件上传生成输入，我已经使用范围和以下逻辑和代码来完成了此操作：

一个隐藏的输入和一个按钮，当我单击按钮时，使用ng-click调用控制器功能，该功能确定生命周期的“状态”（待机，验证错误，文件上传等）。并修改按钮行为，以防控制器上的状态==='standby'执行 document.getElementById(fileInputId).click() 然后，浏览器会提示文件选择窗口，之后，我在输入中使用onchange来运行函数以在上传之前验证文件，并在输入onchange属性上使用它

<input type="file" id="fileInput"onchange="angular.element(this).scope().validateFile(this)" aria-label='fileInput'>
</input>

之前的代码可以使用$ scope方式正常工作，但是现在我想为输入创建一个组件，但是由于组件不使用作用域服务，因此我难以确定如何从输入中调用函数我以前在onchange属性上使用过，而ng-change指令不支持输入文件标签。

我一直在使用的一些代码：

Template.html（提取）

<div layout="row" >
    <div layout="column"  flex-gt-md="" flex-xs="100" class="button-xs" ng-click="field.clickHandlers()">
        <md-button class="md-raised md-primary" >{{field.input.buttonLabel}}</md-button></div>
        <input id ="{{field.uid}}"type="file" aria-label='fileInput' style="display:none" ng-change="field.validateFile()" ng-model="field.value"></input>
</div>

我要调用的函数

field.validateFile = function(file){
    console.log(file)
    }

我使用controllerAs ='field'，如果state.phase ==='stand-by'，我将调用上载函数，我想我可以为此功能使用开关，但主要问题是如何从组件的onchange输入属性调用它。

我尝试使用

onchange="{{field.validateFile(this)}}"

但是我收到以下错误

错误：[$ compile：nodomevents]不允许对HTML DOM事件属性进行插值。请改用ng-版本（例如ng-click而不是onclick）。

如果我使用ng-change指令，什么也不会发生：

 <input id ="{{field.uid}}" type="file" aria-label='fileInput'
        style="display:none" ng-change="field.validateFile()"
        ng-model="field.value"></input>

有什么方法可以将数据从文件输入传递到组件？

0 个答案: