如何将 ng-click 传递给我的指令替换的元素？答案

【问题标题】：How can I pass ng-click to the element my directive replaces?如何将 ng-click 传递给我的指令替换的元素？
【发布时间】：2017-02-18 19:17:09
【问题描述】：

使用在this 帖子上创建的 angular 指令 Max 可以轻松导入 SVG，我已经在我的页面上导入了一些 SVG。我现在想向 SVG 添加一个点击事件，除了该指令不会将点击方法传输到导入的 SVG。如果我在浏览器中检查 SVG，我发现它确实缺少 ng-click。

HTML

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

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

如果我将ng-click="bar()" 移动到页面上的另一个元素，它就可以正常工作。我还尝试将ng-click="bar()" 移动到无效的svg 文件本身，并且我尝试执行this 帖子中建议的操作，但也无效。

按要求插入：https://plnkr.co/edit/eqOZJO5Ar8oOmXCjg3Vs

【问题讨论】：

你能创建一个 plunkr/fiddle 吗？
好的，给我几分钟。
您可以尝试将ng-click 指令添加到svg-image 周围的包装元素中？
@PankajParkar 我在帖子中添加了一个 plunker。
@JosephWebber 因为您使用了replaceWith，它将当前元素替换为svg（当您将其替换为内部内容时，父点击事件消失）。你可以用 append 代替，看看this plunkr

标签： angularjs svg angularjs-directive

【解决方案1】：

试试这个

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>

【讨论】：

应该scope.bar(){ 不是scope.bar = function(){？我都试过了，还是不行。
scope.bar = function()
@JihinRaju 虽然这行得通，但 OP 还问了其他问题，请查看 OP 和我在 cmets 中的讨论

【解决方案2】：

一种可能的解决方案是编译您的新元素并调用生成的模板函数，传入范围：

.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

【讨论】：