從角度指令獲取數據

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

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

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