Question

对于我的网页，我使用Django 1.9作为服务器端，使用AngularJs作为客户端任务（验证等）。
另外对于CSS我使用Bootstrap（和Angular-Ui）。

现在我在Django中创建了我需要的表单，将它们插入实际页面。除此之外，我有一个类型文件的输入字段，允许用户上传文件。

当用户选择了一个文件时，我想在AngularJs中做一些检查。问题是：我不知道如何从Django获得某种回调知道上传文件窗口已关闭。
我当前的解决方案涉及一个普通的javascript函数，该函数绑定到upload字段并调用AngularJs函数，但这不能正常工作。

所以在我的forms.py中，它看起来像是：

class UploadForm(forms.Form):
    fa_file = forms.FileField(label='Select a Fasta file',
                               widget=forms.TextInput(attrs={'type': 'file'})

插入此字段的html页面部分如下所示：

<div class="panel-body">
    <input type="text" id="uploadFile" placeholder="Choose File" disabled="disabled"/>
    <div class="file-upload btn btn-sm btn-primary">
        <span>Upload</span>
        {{ form.fa_file }}
    </div>
</div>

绑定到文件上传字段的javascript函数是：

<script>
    document.getElementById("id_fa_file").onchange = function () {
        document.getElementById("uploadFile").value = this.value;
        angular.element(this).scope().changeFaFileValue(this.value);
    };
</script>

只要用户完成选择文件，就会执行此on change方法。基本上这是我想要实现的行为和我的控制器的AngularJS功能＆＃39; changeFaFileValue＆＃39;也被执行。
但似乎执行发生在自己的范围内。我可以告诉，因为我的AngularJS控制器中有一个观察器，用于变换，该变量在＆lt; changeFaFileValue＆＃39;当通过这个普通的Javascript on change函数调用该函数时，不会触发此观察器。但是，如果我打电话给＆＃39; changeFaFileValue＆＃39;从我控制器的某个地方，观察者按预期执行。

控制器中的方法如下所示：

$scope.$watch('allow_submit', function(){
   console.log("IT WORKED.");
});

$scope.changeFaFileValue = function(newPath){
    $scope.fa_file_js = newPath;
    $scope.allow_submit = !$scope.allow_submit;
}

我想我在这里缺少一些重要的东西你能否告诉我实现理想行为的正确方法是什么？我的方法是否正确？

通过Django通知AngularJS文件上传

0 个答案: