Question

I currently have an angular directive that I have wrote to make file uploads easier. I basically want to make the directive fire an event when the upload is complete then use jquery to bind this event to update an image on the page.

This is how i have setup my directive:

module.directive("fileUpload", 
function()
{
    var directive = 
    {
        restrict:"E",
        template:'<form method="post" enctype="multipart/form-data"></form>',
        replace:true,

        compile: function compile()
        {
            return function postLink(scope, iElement, iAttrs, controller)
            {
                //some file upload code in jquery.
            }
        }
    };
    return directive;

});

What i basically want to know is how can i make this fire an event? (if its possible)

I know directives are a complicated area so if anyone has any suggestions on how i should be configuring it, they would also be much appreciated.

Answer 1

If you only want to update image url, you can simply let controller do it.
http://plnkr.co/edit/yCKaKH

Here, it is using $scope created within the directive where ‘img’ element
is defined.

If you want to communicate outside of the directive (scope-wise), you can
use event mechanism via $scope.$emit() and $scope.$on(). http://plnkr.co/edit/qlWIyB