Question

我在下面创建了一个指令：

HTML：

 <div image-upload></div>

指令：

angular.module('app.directives.imageTools', [
    "angularFileUpload"
])
    .directive('imageUpload', function () {
        // Directive used to display a badge.
        return {
            restrict: 'A',
            replace: true,
            templateUrl: "/static/html/partials/directives/imageToolsUpload.html",

            controller: function ($scope) {

                var resetScope = function () {
                    $scope.imageUpload = {};
                    $scope.imageUpload.error = false;
                    $scope.imageUpload['image_file'] = undefined;
                    $scope.$parent.imageUpload = $scope.imageUpload
                };

                $scope.onImageSelect = function ($files) {
                    resetScope();
                    $scope.imageUpload.image_file = $files[0];
                    var safe_file_types = ['image/jpeg', 'image/jpg']
                    if (safe_file_types.indexOf($scope.imageUpload.image_file.type) >= 0) {
                        $scope.$parent.imageUpload = $scope.imageUpload

                    }
                    else {
                        $scope.imageUpload.error = true
                    }

                };

                // Init function.
                $scope.init = function () {
                     resetScope();
                };
                 $scope.init();
            }
        }
    });

这个指令工作正常，在我的控制器中，我根据需要访问$scope.imageUpload。

接下来，我尝试将指令传递给当前图像，但是当我这样做时$scope.imageUpload未定义且事情变得奇怪......

HTML：

 <div image-upload current="project.thumbnail_small"></div>

这是提供错误的更新代码，请注意新的current。

angular.module('app.directives.imageTools', [
    "angularFileUpload"
])
    .directive('imageUpload', function () {
        // Directive used to display a badge.
        return {
            restrict: 'A',
            replace: true,
             scope: {
                current: '='
            },
            templateUrl: "/static/html/partials/directives/imageToolsUpload.html",

            controller: function ($scope) {

                var resetScope = function () {
                    $scope.imageUpload = {};
                    $scope.imageUpload.error = false;
                    $scope.imageUpload['image_file'] = undefined;
                    $scope.$parent.imageUpload = $scope.imageUpload

                    if ($scope.current != undefined){
                        $scope.hasCurrentImage = true;
                    }
                    else {
                        $scope.hasCurrentImage = true;
                    }

                };

                $scope.onImageSelect = function ($files) {
                    resetScope();
                    $scope.imageUpload.image_file = $files[0];
                    var safe_file_types = ['image/jpeg', 'image/jpg']
                    if (safe_file_types.indexOf($scope.imageUpload.image_file.type) >= 0) {
                        $scope.$parent.imageUpload = $scope.imageUpload


                    }
                    else {
                        $scope.imageUpload.error = true
                    }

                };

                // Init function.
                $scope.init = function () {
                     resetScope();
                };
                 $scope.init();
            }
        }
    });

这里发生了什么？

    scope: {
        current: '='
    },

一切都有效，但我无法访问current值。

也许我没有正确使用scope: {。

Answer 1

在更新的代码中，您通过定义scope: {current: '=' }来使用隔离范围，因此指令中的控制器只能看到隔离范围而不是原始范围。

您可以在此处详细了解此信息：范围部分中的http://www.ng-newsletter.com/posts/directives.html

将范围传递给指令的奇怪行为

1 个答案: