Как получить доступ к переменной из угловой директивы?

Question

Эта директива назначается изображению, и она использует плагин jQuery под названием Cropper. Как я могу получить в HTML или в другом угловом контроллер динамической переменной ширина и высота элемента: e.width или e.height

.directive("imgcrop", [function ($scope, $controller) { 
     return { 
      restrict: "A", 
      scope: { 
      proposal : "=" 
      }, 
      transclude: true, 
      replace: true, 
      link : function ($scope, $el, $attr) { 
       $attr.$observe("src", function (src) { 
          jQuery('#cropImage').cropper('destroy'); 
          jQuery('#cropImage').cropper({ 
           viewMode  : 0, 
           zoomable  : false, 
           preview: ".extra-preview", 
           dragMode  : 'crop', 
           guides   : true, 
           highlight  : true, 
           cropBoxMovable : true, 
           cropBoxResizable: true, 
           crop   : function (e) { 
            // Output the result data for cropping image. 
            console.log(e.width); 
            console.log(e.height); 
            } 
          }); 

       }); 
      } 
     } 
    } ]); 

Answer 1

Setup область применения привязки, которые вы можете использовать, чтобы передать ширину и высоту назад к контроллеру.

.directive("imgcrop", [function ($scope, $controller) { 
      return { 
       restrict: "A", 
       scope: { 
       proposal : "=" 
       , croppedWidth: '=' 
       , croppedHeight: '=' 
       }, 
       transclude: true, 
       replace: true, 
       link : function ($scope, $el, $attr) { 
        $attr.$observe("src", function (src) { 
         jQuery('#cropImage').cropper('destroy'); 
         jQuery('#cropImage').cropper({ 
          viewMode  : 0, 
          zoomable  : false, 
          preview: ".extra-preview", 
          dragMode  : 'crop', 
          guides   : true, 
          highlight  : true, 
          cropBoxMovable : true, 
          cropBoxResizable: true, 
          crop   : function (e) { 
           // Output the result data for cropping image. 
           $scope.croppedWidth = e.width; 
           $scope.croppedHeight = e.height; 
          } 
         }); 
        }); 
       } 
      } 
    } ]); 

Тогда на изображении:

<img imgcrop croppedWidth="vm.width" croppedHeight="vm.height">