Joseph Webber Joseph Webber - 1 year ago 75
AngularJS Question

How can I pass ng-click to the element my directive replaces?

Using the angular directive Max created on this post for easily importing SVGs, I've imported a handful of SVGs on my page. I now want to add a click event to an SVG, except the directive doesn't transfer the click method to the imported SVG. If I inspect the SVG in my browser I see that it is indeed missing the ng-click.


<svg-image class="svg foo" src="img/foo.svg" ng-click="bar()"></svg-image>


$ = function() {

If I move
to another element on my page it works just fine. I've also tried moving
to the svg file itself which didn't work, and I've tried doing what was suggested in this post which didn't work either.

plunker as requested:

Answer Source

One of possible solutions is to compile your new element and call resulting template function, passing in scope:

.directive('svgImage', ['$http', '$compile', function($http, $compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var imgURL = element.attr('src');
      // if you want to use ng-include, then
      // instead of the above line write the bellow:
      // var imgURL = element.attr('ng-include');
      var request = $http.get(
        {'Content-Type': 'application/xml'}

      scope.manipulateImgNode = function(data, elem){
        var $svg = angular.element(data)[4];
        var imgClass = elem.attr('class');
        if(typeof(imgClass) !== 'undefined') {
          var classes = imgClass.split(' ');
          for(var i = 0; i < classes.length; ++i){
        angular.element($svg).attr("ng-click", attrs.ngClick);
        return $compile($svg)(scope);

        element.replaceWith(scope.manipulateImgNode(data, element));


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download