简体   繁体   English

Angf.js中带有ng-file-upload的ngf-max-size $ digest()错误

[英]ngf-max-size $digest() error with ng-file-upload in angular.js

This is source code. 这是源代码。

<div class="thumbnail" ngf-accept="'image/*'" ngf-pattern="'*.jpg,*.jpeg,*.gif,*.png'" ngf-max-size="1MB">

Below the Derective Html Template. 矫正性HTML模板下方。

angular.module('ptgui.imagebox',[
    'ngFileUpload'
  ])
  .directive('ptguiImagebox', ['$compile', function($compile) {
    return {
      templateUrl: 'scripts/libs/ptgui/ptgui-imagebox.html',
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: "="
      },
      replace: true,
      link: function ($scope, element, attrs) {

        $scope.$watch('ngModel',function(newFile, oldFile){
          if (newFile) {
            $scope['ngModel'] = newFile;
          } else {
            $scope['ngModel'] = oldFile;
          }
        });

      }
    };
  }]);

Below the directive. 在指令下方。

When I upload image over max_size, $digest() error comes up consistently below. 当我通过max_size上传图片时,以下始终出现$ digest()错误。

enter image description here 在此处输入图片说明

and I have one more question. 我还有一个问题。 after I find solution that resolve this issue, I will make alert message when someone upload image over max_size. 找到解决此问题的解决方案后,当有人上传超过max_size的图像时,我会发出警报消息。

Thank you your answer. 谢谢你的回答。

You shouldn't change your model inside watch since it creates a loop. 您不应该在手表内部更改模型,因为它会创建一个循环。 If you just need to alert when a file is uploaded whether the size is above you can just check the status. 如果您只需要在文件上传时提醒大小是否超过该大小,就可以检查状态。

Let's say you have this input: 假设您输入以下内容:

 <input type="file" ngf-select ng-model="picFile" name="file"    
         accept="image/*" ngf-max-size="1MB" required
         ngf-model-invalid="errorFile">

Then you just need to have this in your html to show the limit size exceeded alert: 然后,您只需要在html中显示它,即可显示超出限制大小的警报:

<i ng-show="myForm.file.$error.maxSize">File too large 
      {{errorFile.size / 1000000|number:1}}MB: max 1M</i>

And also you don't need a directive to handle that. 而且您也不需要指令来处理。

Check here for more info around validation. 在此处查看有关验证的更多信息。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM