Question

我正在编写一个角度为1.5.0-rc0的应用程序。

我写了一个image-upload指令，允许用户浏览图像并旋转它。该指令可以使用图像URL获取名为image的属性。

指令代码：

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

您应该使用角度服务来处理指令和控制器之间的通信。

您还应考虑将大部分逻辑移至同一服务。

从angular指令中获取数据

2 个答案: