Question

我做了指示，在框中显示图像。来源如下。

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

      }
    };
  }]);

及以下是指令模板。

<div class="thumbnail" ngf-accept="'image/*'" ngf-pattern="'*.jpg,*.jpeg,*.gif,*.png'">
  <img style="width: 100%;height: 100%;" ngf-thumbnail="ngModel || '/assets/images/upload.png'" >
</div>

然后我使用如下的指令。

<ptgui-imagebox class="col-md-3" style="width: 100px;height: 100px;" ng-model="product.image" ngf-select></ptgui-imagebox>
                  <div class="col-md-4 hidden-sm hidden-xs">
                    <div class="file-drop-zone" ngf-select ngf-drop ng-model="product.image" ngf-drag-over-class="'file-drop-zone-over'" ngf-accept="'image/*'" ngf-pattern="'*.jpg,*.jpeg,*.gif,*.png'">
                      <span class="help-block"><i class="fa fa-file-picture-o"> 파일을 여기로 끌어주세요.</i></span>
                    </div>
                  </div>

尚未使用ngf-max-size的

soruce。那个我想做的运行。但我必须检查文件大小，所以我添加了ngf-max-size =＆＃34; 1M＆＃34;如下。

<div class="file-drop-zone" ngf-select ngf-drop ng-model="product.image" ngf-drag-over-class="'file-drop-zone-over'" ngf-accept="'image/*'" ngf-pattern="'*.jpg,*.jpeg,*.gif,*.png'" # ngf-max-size="1MB">

但是当我添加它时，我能够看到如下所示的循环错误。 enter image description here

Answer 1

你的问题很可能在这里：

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

你正在覆盖你观察到的变量，从中移除所有有角度的内部道具，一旦更新完成，手表就会再次启动。

您必须正确处理变量更新：

Watch variable and change it

添加ngf-max-size

1 个答案: