I created an angular directive that dynamically displays an image on my webpage based on the value in a querystring within the URL:
app.directive('myDirective', function(myService) {
return {
restrict: 'A',
replace: true,
scope: true,
link: function($scope, element, attrs) {
var myImage = myService.getParam();
if (myImage == AA3) {
$scope.myImage = 'YAHOO';
}
else {
$scope.myImage = 'capitalone';
}
},
template : '<img src="/resources/{{myImage}}.png" />'
};
});
The issue I'm facing is that I can see 2 separate HTTP requests being made:
1. http://www.mydom.net/resources/{{myImage}}.png
2. http://www.mydom.net/resources/YAHOO.png
Is there a way for me to delay the compilation of the template until the variable myImage actually contains a value?