I have a custom directive that looks like this:
.directive('ngImageOnLoad', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
scope.$apply(function (){
scope.$eval(attrs.ngImageOnLoad);
});
event.preventDefault();
});
}
};
})
The HTML img tag using the above directive is shown below:
<img src="images/abc.jpg" ng-image-on-load="onImageLoad(this)" />
In my controller, I have defined the function imageOnLoad as follows:
$scope.imageOnLoad = function(theImg)
{
console.log("theImg is: " + theImg); //This prints [Object Object]
console.log("theImg.src: " + theImg.src); //This prints UNDEFINED!!
}
Question:
I am facing an issue where the 'this' reference is not working properly. Why is the image's src attribute returning as undefined in the function imageOnLoad?