CODEWITHSUNDEEP
javascriptangularjs
AndrewCoke
AndrewCoke

Reputation: 9

AngularJS basic regarding replacement content in directive

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.

Upvotes: 0

Views: 29

Answers (2)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

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>'
    }
});

Upvotes: 3

Arno_Geismar
Arno_Geismar

Reputation: 2330

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);

Upvotes: 0

Related Questions