Question

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

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

图像的src正在控制器中设置（在图像上传到浏览器之后）：

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

      }
    };
  });

所以这个imageCropper只被应用，如果在视图代码中我默认定义src，当我在控制器中更改它时：没有任何反应 - cropper不起作用：但为什么？如何在新图像src上设置它？

Answer 1

在Angular的控制器中，不建议手动更改DOM。您最好使用指令来处理内容更改，因为Angular将触发所谓的digest loop以检查绑定到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。所以我想，你直接的裁剪方法可能是这样的：

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

angularJS观看图像变化

1 个答案: