AngularJS JCrop 지시문을 수정하는 방법은 무엇입니까?

Question

JCrop을 AngularJS와 함께 사용하려고합니다. 나는 조금 해결하기 위해 도움을 필요로 다음 지시문이 있습니다

.directive('imgCropped', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { src:'@', selected:'&' }, 
     link: function(scope,element, attr) { 
      var myImg; 
      var clear = function() { 
       if (myImg) { 
        myImg.next().remove(); 
        myImg.remove(); 
        myImg = undefined; 
       } 
      }; 
      scope.$watch('src', function(nv) { 
       clear(); 
       if (nv) { 
        element.after('<img />'); 
        myImg = element.next(); 
        myImg.attr('src',nv); 

        $(myImg).Jcrop({ 
         trackDocument: true, 
         onSelect: function(x) { 
          /*if (!scope.$$phase) { 
           scope.$apply(function() { 
            scope.selected({cords: x}); 
           }); 
          }*/ 
          scope.selected({cords: x}); 
         }, 
         aspectRatio: 1, 
         boxWidth: 400, boxHeight: 400, 
         setSelect: [0, 0, 400, 400] 
        }); 
       } 
      }); 

      scope.$on('$destroy', clear); 
     } 
    }; 
}) 

문제가 JCrop 올바르게 실제 이미지 크기를 감지하지 않는다는 것입니다 및 나는 trueSize 옵션, 내가 알고있는 유일한 방법을 추가 할 필요가 어떻게 해야할지 콜백에서 Jcrop 호출을 감싸는 것은 꽤 심해 보인다.

또한 onSelect 콜백에서 scope. $ apply를 사용하면 이미 진행중인 $ digest 오류가 발생합니다. 그게 왜?

편집 : 성공적으로 다음 코드로 실제 이미지 크기를 얻을 수 있지만, 그렇게

.directive('imgCropped', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { src:'@', selected:'&' }, 
     link: function(scope,element, attr) { 
      var myImg; 
      var clear = function() { 
       if (myImg) { 
        myImg.next().remove(); 
        myImg.remove(); 
        myImg = undefined; 
       } 
      }; 
      scope.$watch('src', function(nv) { 
       clear(); 
       if (nv) { 
        element.after('<img />'); 
        myImg = element.next(); 
        myImg.attr('src',nv); 

        var temp = new Image(); 
        temp.src = nv; 
        temp.onload = function() { 
         var width = this.width; 
         var height = this.height; 

         $(myImg).Jcrop({ 
          trackDocument: true, 
          onSelect: function(x) { 
           /*if (!scope.$$phase) { 
           scope.$apply(function() { 
           scope.selected({cords: x}); 
           }); 
           }*/ 
           scope.selected({cords: x}); 
          }, 
          aspectRatio: 1, 
          boxWidth: 400, boxHeight: 400, 
          setSelect: [0, 0, 400, 400], 
          trueSize: [width, height] 
         }); 
        } 
       } 
      }); 

      scope.$on('$destroy', clear); 
     } 
    }; 
}) 

Answer 1

당신이하고있는 것은 아마 괜찮 할 수있는 더 좋은 방법이 있어야합니다. 지침은 괜찮아 보입니다. 이미지 크기를 가져다 주자면 다음과 같이 똑같은 JavaScript로 처리 할 수 ​​있습니다.

var img = new Image(); 
img.onload = function() { 
    var w = img.width, 
     h = img.height; 
    //do what you need to do here. 
}; 
img.src = 'somefile.gif'; 

DOM 조작을 줄일 수 있습니다. 내가 (약간 더 수정 후) 이물을 누르면됩니다 지시문에서 일하고 있어요

Answer 2

:

angular-image-crop

working demo

생성자 콜백에서, 나는 this.getBounds() 전화 그 값을 에 적용하면 onSelect :

https://github.com/coolaj86/angular-image-crop/blob/master/app/scripts/controllers/profile-pic.js#L24