How can I pass the directive element as a parameter on ng-click

Question

So I know $event.target will hold the dom element but my scenario is quite different...

I have a custom directive called change-image which I use to change images dynamically...

Here's my Directive code...

app.directive('changeImage', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            element.on('click', function ($event) {
                var imgElem = $event.target;
                console.log(imgElem);
                $event.stopPropagation();
                var form = '<div class="form-group"><label for="image">Choose Image</label><input type="hidden" ><input id="inputImage" name="image" type="file" accept="image/*" image="image" class="form-control"><img ng-src="{{image.url || \'http://placehold.it/350x350.jpg\' }}" type="{{image.file.type}}" class="form-control"><button class="form-control" id="change-image-btn" ng-click="uploadPic(image, imgElem)">Add</button>';
                form = $.parseHTML(form);
                $('#change-form').html($compile(form)($scope));
            });
        },
        replace: true
    };
}]);

As you can see on clicking the directive, I'm creating some html with string and saving it to a variable 'form', then I parse it to html before I append it in a div.

So notice in this string html that I have a button with an ng-click directive on it. Here I pass the image which is an object from angular image upload... And I also want to pass the element on which the change image onclick was triggered...

The var imgElem has the current image dom and I can see it when I console it. But on passing this imgElem to ng-click, the parameter on uploadPic() function for the element is always undefinded. Where as the image parameter does point to the image object I got after the clicking the button.

I tried using the variable directly by writing the ng-click as

ng-click=uploadPic(image, ' + imgElem + ');

But it shows parse error and I guess that's expected...

So what's really up here? I can get the image object but the element parameter is always undefined and does not point to the directive element...

How do I pass this element to uploadPic() function... Please do help...

Answer 1

the variables that you are passing should be defined in the controller since the html is appended to parent DOM the variables inside diretive become undefined in order to do so you can create an object in the controller pass that as a parameter to the directive using scope then you will be able to observe the changes.

 app.controller('MainCtrl', function ($scope) {
        $scope.test= {};
        $scope.test.valuetouse=undefined;
    });
app.directive('changeImage', ['$compile', function ($compile) {
return {
    scope:true,
    restrict: 'A',
    link: function ($scope, element, attrs) {
        element.on('click', function ($event) {
            test.valuetouse = $event.target;
            console.log(imgElem);
            $event.stopPropagation();
            var form = '<div class="form-group"><label for="image">Choose Image</label><input type="hidden" ><input id="inputImage" name="image" type="file" accept="image/*" image="image" class="form-control"><img ng-src="{{image.url || \'http://placehold.it/350x350.jpg\' }}" type="{{image.file.type}}" class="form-control"><button class="form-control" id="change-image-btn" ng-click="uploadPic(image, imgElem)">Add</button>';
            form = $.parseHTML(form);
            $('#change-form').html($compile(form)($scope));
        });
    },
    replace: true
};

}]);