从 angular 指令中获取数据

Question

我正在编写一个 angular 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

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

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

从 angular 指令中获取数据

fetching data from an angular directive

javascript

angularjs

angular-directive