從角度指令獲取數據

Question

我在寫一個角度爲1.5.0-rc0的應用程序。

我寫了一個image-upload指令，允許用戶瀏覽圖像並旋轉它。該指令可以得到一個名爲image的屬性和一個圖片url。

指令代碼：

angular.module('myalcoholist').directive('imageUpload',[ 
    function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'views/image-upload.html', 
      scope: { 
       image: '=' 
      }, 
      link: function(scope, elem, attrs) { 

       scope.$watch(function() { 
         return scope.image 
        }, 
        function(newValue, oldValue) { 
         var val = newValue || null; 
         $('#upload-img').attr('src',val); 
        }); 
      }, 
      controller: ['$scope', function($scope) { 
       $scope.imageRotateDegrees=0; 
       $scope.imageExifRotation=0; 
       $scope.isImageFileExif=false; 
       if ($scope.imageUrl) { 
        $('#upload-img').attr('src',$scope.imageUrl); 
       } 
       $scope.imageChanged = function (e) { 
        var imageFile = e.files[0]; 
        var img = $('#upload-img'); 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         var exif = EXIF.readFromBinaryFile(e.target.result); 
         switch (exif.Orientation) { 
          case 8: 
           $scope.$apply(function() { 
            $scope.imageRotateDegrees=-90; 
            $scope.imageExifRotation=-90; 
            $scope.isImageFileExif=true; 
           }) 
           img.css('transform', 'rotate(-90deg)'); 
           break; 
          case 3: 
           $scope.$apply(function() { 
            $scope.imageRotateDegrees=180; 
            $scope.imageExifRotation=180; 
            $scope.isImageFileExif=true; 
           }) 
           img.css('transform', 'rotate(180deg)'); 
           break; 
          case 6: 
           $scope.$apply(function() { 
            $scope.isImageFileExif=true; 
            $scope.imageExifRotation=90; 
            $scope.imageRotateDegrees=90; 
           }) 
           img.css('transform', 'rotate(90deg)'); 
           break; 
          default: 
           $scope.$apply(function() { 
            $scope.isImageFileExif=false; 
           }) 
         } 
        } 
        var reader2 = new FileReader(); 
        reader2.onload = function(e) { 
         img.attr('src', e.target.result); 
        } 
        reader.readAsArrayBuffer(imageFile); 
        reader2.readAsDataURL(imageFile); 
       } 
       $scope.rotateImageLeft = function() { 
        $scope.imageRotateDegrees=($scope.imageRotateDegrees-90)%360; 
        $('#upload-img').css('transform','rotate(' + $scope.imageRotateDegrees + 'deg)'); 
       } 
       $scope.rotateImageRight = function() { 
        $scope.imageRotateDegrees=($scope.imageRotateDegrees+90)%360; 
        $('#upload-img').css('transform','rotate(' + $scope.imageRotateDegrees + 'deg)'); 
       } 
       $scope.rotateImage180deg = function() { 
        $scope.imageRotateDegrees=($scope.imageRotateDegrees+180)%360; 
        $('#upload-img').css('transform','rotate(' + $scope.imageRotateDegrees + 'deg)'); 
       } 
       $scope.rotateByExif = function() { 
        $('#upload-img').css('transform','rotate(' + $scope.imageExifRotation + 'deg)'); 
        $scope.imageRotateDegrees=$scope.imageExifRotation; 
       } 
      }], 
     } 
    } 
]); 

的image-upload.html模板文件

<div class="container"> 
<div class="row"> 
    <div class="col-md-2"> 
     <input id="image-upload-file" type="file" file-model="imageFile" onchange="angular.element(this).scope().imageChanged(this)" class="form-control" accept="image/*" /> 
    </div> 
    <div class="col-md-2"> 
     <button class="form-control" ng-disabled="!imageFile && !image" ng-click="rotateImageLeft()" type="button">Rotate Left</button> 
    </div> 
    <div class="col-md-2"> 
     <button class="form-control" ng-disabled="!imageFile && !image" ng-click="rotateImageRight()" type="button">Rotate Right</button> 
    </div> 
    <div class="col-md-2"> 
     <button class="form-control" ng-disabled="!imageFile && !image" ng-click="rotateImage180deg()" type="button">Rotate 180deg</button> 
    </div> 
    <div class="col-md-2"> 
     <button class="form-control" ng-disabled="!isImageFileExif" ng-click="rotateByExif()" type="button">Rotate by EXIF</button> 
    </div> 
    <div class="col-md-2"> 
     <span ng-bind="imageRotateDegrees"></span>deg 
    </div> 
</div> 
<hr /> 
<div class="row"> 
    <div class="col-md-6 col-md-offset-3" style="overflow: scroll;"> 
     <img id="upload-img" /> 
    </div> 
</div> 
<hr /> 
</div> 

指令工作，到目前爲止，一切順利。

現在我想能夠從該指令中獲取數據，在我的情況下我需要獲取圖像文件數據和旋轉度。

如何從調用控制器獲取數據？

感謝

Answer 1

我通過雙向綁定的指令範圍工作的解決方案。

意味着我下面的代碼添加到指令配置代碼：

scope: { 
     imageRotqteDegrees='=' 
} 

這增加imageRotateDegrees到$scope，並允許我使用image-rotate-degrees的屬性格式來image-upload。

所以，如果我用下面的代碼執行指令：

<image-upload image-rotate-degrees="MyController.MyVar"></image-upload> 

其綁定到名爲MyVar

Answer 2

您應該使用的角度服務來處理的指令和控制器之間的通信控制器的變量。

您還應該考慮將大部分邏輯移至相同的服務。