在angular.js中使用ng-file-upload时出现ngf-max-size $ digest()错误

时间:2016-12-15 02:52:31

标签: javascript jquery html angularjs

这是源代码。

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

在Derective Html Template下面。

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;
          }
        });

      }
    };
  }]);

指令下方。

当我通过max_size上传图片时,$ digest()错误始终低于。

enter image description here

我还有一个问题。 在找到解决此问题的解决方案后,当有人通过max_size上传图像时,我会发出警告消息。

谢谢你的回答。

1 个答案:

答案 0 :(得分:1)

您不应该在手表内更改模型,因为它会创建一个循环。如果您只需要在上传文件时发出警报,无论大小是否高于您,您只需检查状态即可。

假设你有这样的意见:

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

然后你只需要在你的html中显示超出警告的限制大小:

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

而且你也不需要指令来处理它。

检查here以获取有关验证的更多信息。