I have some HTML which looks like:
<custom-logo>
<div>
<img src="logo.png">
</div>
<custom-logo-after>
</custom-logo-after>
</custom-logo>
I'm trying to figure out how I can amend the custom-logo directive in Angular JS to include a link around the img tag so I could add a dynamic link address in Angular JS.
You can use ng-transclude to do that
.directive('customLogo', function() {
return {
transclude: true,
template: '<a href="http://www.google.com"><ng-transclude></ng-transclude></a>'
}
});
You can do it like this Link to fiddle
angular.module('directives', []).directive('customLogo',
function() {
return {
restrict: 'E',
link: function($scope, element, attrs) {
var image = element.find('img');
image.attr("src","blabla.png");
}
};
}
);
angular.module('myApp', ['directives']);
<div ng-app="myApp">
<custom-logo>
<div>
<img src="logo.png">
</div>
</custom-logo>
</div>
note that "blabla.png" can be a reference to you image file on your scope.
so for instance $scope.image = "src/images/blabla.png"
and then replace
image.attr("src",$scope.image);
custom-logo- We don't have this directive, so we need to see its code and template in order to help