如何挂在字段类型文件上？

Question

请帮忙解决问题。是一种形式： jsfiddle

。如果用户在字段中输入数据：

name, email, phone, message

然后输出到控制台。

但是如果用户将文件添加到字段

attachment

，控制台没有输出（应显示“55555”）

js:

briefApp.directive('attachmentValidate', function() {
    return {
        link: function($scope, element, attrs, ctrl) {
            $scope.$watch('attachment', function(value){
                console.log(55555);

            });            
        }
    };
});

我需要在添加（或删除）操作控制器时归档 "attachmentValidate" 并且控制台输出“55555”

Answer 1

input type="file" will not change the ng-model 无论如何，您需要使用指令来完成。在指令中，我们将绑定文件的 change 事件，每当文件发生更改时，我们都会将该文件名分配给 ng-model 变量。

指令

briefApp.directive("fileread", [function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attributes,ngModel) {
            element.bind("change", function (changeEvent) {
                scope.$evalAsync(function () {
                    // this will assigned 1st file to ng-model
                    ngModel.$setViewValue(changeEvent.target.files[0]);
                });
            });
        }
    }
}]);

HTML

<input type="file" size="1" name="attachment" value="" id="fileUploadField" 
ng-model="attachment" fileread attachment-validate />

以上指令将更新范围值，然后手表被触发并 console.log(5555) 被打印。

Working Fiddle

Answer 2

根据官方 angularjs 文档，如 https://docs.angularjs.org/api/ng/directive/input

注意：并非所有提供的功能都适用于所有输入类型。具体来说，input[file] 不支持通过 ng-model 进行数据绑定和事件处理。

因此您可以尝试将此文件 select 事件绑定为元素

上的更改事件

     link: function($scope, element, attrs, ctrl) {
         element.bind('change', function(value){
           console.log("5555");
           console.log("Hurray");
        });
   });

如何挂在字段类型文件上？

how to hang on the field type file?

javascript

forms

file

angularjs

angularjs-directive