javascript - angularJS 观察图像变化

Question

在我的应用程序中我有这样的观点:

      <div class="r-container" image-crop>
        <img id="photo-cropper" src="">
      </div>

图像的src正在 Controller 中设置(图像上传到浏览器之后):

$scope.files = files;        
var reader = new FileReader();
reader.onload = function(e) {
  $('#photo-cropper').attr('src', e.target.result);
};
reader.readAsDataURL(files[0]);

然后我有这样的指令(也许有一点 jQuery 风格，但我们可以说它没问题):

.directive('imageCrop', function () {
    return {
      restrict: 'EA',
      link: function postLink(scope, element, attrs) {  
        var $image, originalData;   

                angular.element("#image-crop-modal").on("shown.bs.modal", function() {
                    console.log('postLink');
                    $image = angular.element(".r-container > img");
                  originalData = {};
                  $image.cropper({
                    multiple: true,
                    aspectRatio: 1.5,
                    data: originalData,
                    done: function(data) {
                      console.log(data);
                    }
                  });
                });
                angular.element("#save-cropper").click(function() {
                  originalData = $image.cropper("getDataURL");
                  console.log(originalData);
                  angular.element('#image-crop-modal').modal('hide');
                  scope.setCroppedData(originalData);
                  $image.cropper("destroy");
                });

      }
    };
  });

因此，仅当在 View 代码中我默认定义了 src 时，才应用此 imageCropper，当我在 Controller 中更改它时:没有任何反应 - Cropper 不起作用:但为什么呢？如何在新图像源上设置它？

Answer 1

在 Angular 的 Controller 中，不建议手动更改 DOM。你最好使用指令来处理内容更改，因为 Angular 会触发所谓的 digest loop检查绑定(bind)到 DOM 元素的内容是否已被修改并相应地更新 DOM。

在您看来，使用 ng-src 而不是 src 并将指令移动到元素 <img> 上:

<div class="r-container">
  <img id="photo-cropper" ng-src="imagecontent" image-crop>
</div>

然后在你的指令中，你可以读取$scope.imagecontent中的内容。同理，当要更新内容时，需要执行以下代码:

$scope.evalAsync(function() {
  $scope.imagecontent = newContent;  
});

一次$scope.imagecontent更新时，Angular 会自动刷新 DOM。所以我想，你直接的crop方法可能是这样的:

$image.cropper({
   multiple: true,
   aspectRatio: 1.5,
   data: $scope.imagecontent,
   done: function(data) {
     $scope.evalAsync(function() {
       $scope.imagecontent = data;  
     });
   }
});