Question

使用在this帖子上创建的角度指令Max来轻松导入SVG，我在我的页面上导入了一些SVG。我现在想要向SVG添加一个click事件，除了指令不将click方法转移到导入的SVG。如果我在浏览器中检查SVG，我发现它确实缺少了ng-click。

HTML

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

JS

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

如果我将ng-click="bar()"移动到我页面上的另一个元素，它就可以了。我还尝试将ng-click="bar()"移动到svg文件本身，但该文件无法正常工作，我已尝试按照this帖子中的建议进行操作工作要么。

请求的plunker：https://plnkr.co/edit/eqOZJO5Ar8oOmXCjg3Vs

Answer 1

可能的解决方案之一是编译新元素并调用结果模板函数，传入范围：

libA.a

Plunker

Answer 2

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: