CODEWITHSUNDEEP
javascriptangularjs
Prometheus
Prometheus

Reputation: 33605

Strange behavior passing scope to directive

I have created a directive below:

html:

 <div image-upload></div>

directive:

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();
            }
        }
    });

This directive works fine and in my controller I access $scope.imageUpload as I required.

Next, I tried to pass into the directive a current image but when I do this $scope.imageUpload is undefined and things get weird...

html:

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

This is the updated code that gives the error, note the new 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();
            }
        }
    });

What is going on here?

    scope: {
        current: '='
    },

Everything works again but I don't get access to the current value.

Maybe I'm not using scope: { correctly.

Upvotes: 0

Views: 40

Answers (1)

Mohammad Shahrouri
Mohammad Shahrouri

Reputation: 384

in your updated code you use an isolated scope by defining scope: {current: '=' } so the controller in the directive will only see the isolated scope and not the original scope.

you can read more about this here: http://www.ng-newsletter.com/posts/directives.html in the scope section

Upvotes: 1

Related Questions