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

Question

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.

HTML

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

JS

$scope.bar = function() {
  console.log("click");
};

If I move ng-click="bar()" to another element on my page it works just fine. I've also tried moving ng-click="bar()" 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: https://plnkr.co/edit/eqOZJO5Ar8oOmXCjg3Vs

You could try adding the `ng-click` directive to a wrapper element around the `svg-image`? — Ankh, Oct 10 '16 at 11:32
@JosephWebber because you have used `replaceWith`, which is replacing current element with `svg`(parent click event vanishes when you replace it with inner content). You could use append instead, look at [this plunkr](https://plnkr.co/edit/eqOZJO5Ar8oOmXCjg3Vs?p=preview) — Pankaj Parkar, Oct 10 '16 at 12:01
@PankajParkar Why aren't the classes vanishing as well then? Why just the ng-click? — Joseph Webber, Oct 10 '16 at 12:12
@JosephWebber because you are manually copying all the class here inside `manipulateImgNode` method, please check your code — Pankaj Parkar, Oct 10 '16 at 12:15

score 1 · Accepted Answer · answered Oct 10 '16 at 12:18

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(
        imgURL,
        {'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){
            $svg.classList.add(classes[i]);
          }
        }
        $svg.removeAttribute('xmlns:a');
        angular.element($svg).attr("ng-click", attrs.ngClick);
        return $compile($svg)(scope);
      };

      request.success(function(data){
        element.replaceWith(scope.manipulateImgNode(data, element));
      });
    }
  };
}]);

Plunker

byteC0de · Answer 2 · 2016-10-10T12:14:56.110

0

Try this

var jimApp = angular.module("mainApp",  []);
jimApp.controller('mainCtrl', function($scope){
    $scope.bar = function() {
        console.log("click");
    };
});
jimApp.directive('svgImage', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                onClick: '&'
            },
            template: '<div ng-click="bar();">Hai</div>',
            link: function(scope, element, attrs, fn) {
            scope.bar = function(){
               scope.onClick()();
            }
            }
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
asas
  <svg-image on-click="bar"></svg-image>
</div>

edited Oct 10 '16 at 12:14

answered Oct 10 '16 at 11:45

byteC0de

5,153
5
33
66

Should `scope.bar(){` not be `scope.bar = function(){`? I tried both and it still isn't working. – Joseph Webber Oct 10 '16 at 11:55
scope.bar = function() – byteC0de Oct 10 '16 at 12:00
@JihinRaju Though this would work, OP has asked something else, look at OP and mine discussion in comments – Pankaj Parkar Oct 10 '16 at 12:15

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

2 Answers2