Reputation: 1606
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
Upvotes: 3
Views: 3323
Reputation: 8986
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()
{
}
});
});
}
Upvotes: 6