AngularJS ng-model在Firefox / Safari / Chrome中不起作用，但在IE中运行良好

I have a to allow the user select an image. Then I have where the select image should be displayed. It works well but IE but when it comes to chrome, firefox and safari, the property binded to ng-model does not updates. It seemd like the 3 browsers does not support ng-model in input type=file

我有一个允许用户选择图像。然后我有应该显示选择图像的位置。它运行良好,但IE浏览器,但涉及到chrome,firefox和safari,绑定到ng-model的属性不会更新。看起来好像3个浏览器在input type = file中不支持ng-model

.cshtml

<img alt="Cannot load image" class="img-rounded" id="image" ng-src="convertToBase64(data.ImagePath)" style="width: 150px; height: 150px; object-fit: contain;" />
<input accept="image/*" id="chooseImage" type="file" ng-model="data.ImagePath"/>

2 个解决方案

#1

I'm afraid ng-model is not supported in input type=file but what you can do is implement a directive that does that for you.

我担心输入类型=文件不支持ng-model,但你可以做的是实现一个为你做这个的指令。

#2

This isn't exactly what you want, but this is the defacto directive i use for validating file inputs... might help you.

这不是你想要的,但这是我用来验证文件输入的defacto指令......可能对你有帮助。

/*
        validFile
        properly updates the form validation model for input[type=file]

    */
    .directive('validFile',function(){
      return {
        require:'ngModel',
        link:function(scope,el,attrs,ngModel){
          //change event is fired when file is selected
          el.bind('change',function(){
            scope.$apply(function(){
              ngModel.$setViewValue(el.val());
              ngModel.$render();
            });
          });
        }
      }
    })

#1