Angularjs Directive with Controller

Question

I am attempting to write a directive with it's own controller.

myApp.directive('imageUploadifive', function (createGal)
{
    return {
        restrict: 'A',
        controller: function($scope)
        {
            //create gallery
            $scope.created = createGal.createGal();
            $scope.created.then(function(createGal){
                $scope.gallery.id = createGal.created_id;
                console.log($scope.gallery.id);//returning after the link function
            });

            $scope.gallery.galleryName = "New Image Gallery";
        },
        link: function($scope, element, attrs)
        {
        var id = $scope.gallery.id;
        console.log(id);
            $(element).uploadifive({
                'uploadScript'  : '/beta/images/upload',
                'buttonClass'   : 'uploadifive-button btn btn-primary',
                'queueID'       : 'imageGallery_queue',
                'buttonText'    : 'Select Files',
                'fileSizeLimit' : 500,
                'formData' : {
                    'galleryID' : id
                },
                'onError': function(errorType)
                {
                    alert('There was a problem');
                },
                'onUpload': function()
                {
                }
            });
        }
    };
});

This directive is called with a modal and the //create gallery is generating an id for the uploader js. What I don't understand is the link: function is running and returning undefined before the controller. Any guidance on this would be appreciated.

Thanks

Ye Liu · Accepted Answer · 2013-08-09 02:21:34Z

6

It's not the linking function is called before the controller, it's because the $scope.created.then() is asynchronous, the callback function to set the id is called after the linking function.

To fix it, you need to call $scope.created.then() in the linking function instead:

link: function($scope, element, attrs) {
    $scope.created.then(function(createGal) {
        $scope.gallery.id = createGal.created_id;

        $(element).uploadifive({
            'uploadScript'  : '/beta/images/upload',
            'buttonClass'   : 'uploadifive-button btn btn-primary',
            'queueID'       : 'imageGallery_queue',
            'buttonText'    : 'Select Files',
            'fileSizeLimit' : 500,
            'formData' : {
                'galleryID' : $scope.gallery.id
            },
            'onError': function(errorType)
            {
                alert('There was a problem');
            },
            'onUpload': function()
            {
            }
        });
    });
}

answered Aug 9, 2013 at 2:21

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SuperNinja Over a year ago

i am recieving error TypeError: Cannot call method 'then' of undefined

SuperNinja Over a year ago

just have to pass into the directive , sorry my bad

Ye Liu Over a year ago

All the other code stay the same, only move the call to then to linking function as in my answer.

Collectives™ on Stack Overflow

Angularjs Directive with Controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related