2016-05-21 14 views
2

このディレクティブは画像に割り当てられ、CropperというjQueryプラグインを使用しています。どのように私は要素の動的変数高さ 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); 
            } 
          }); 

       }); 
      } 
     } 
    } ]); 

答えて

0

セットアップあなたが戻って幅と高さを渡すために使用できる結合範囲をコントローラに送信します。

.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"> 
+0

はkickenありがとうございますが、どのように私はそれ、画像内または別のコントローラにそれを追加表示することができますか? vm.widthとは何ですか? –

+0

'vm.width'と' vm.height'はコントローラのスコープのプロパティへの参照です。ディレクティブは、指定したスコーププロパティに幅と高さを割り当てます。 – kicken

+0

私は非常に新しい角度のディレクティブに慣れていませんが、どういうわけか私はあなたのテクニックを理解しています。私の唯一の問題は、HTMLで表示する方法がわからないことです。それがこのプロパティを使用する最も単純な理由です。 –

関連する問題