Question

我有一个带有许多矩形的SVG对象的Ionic应用程序（例如<rect class="info" id="1001" width="20" height="20" transform="translate(40,40)" />）。我想在不经过这些指令的情况下为每个指令添加ng-click指令，并手动将ng-click附加到每个指令。

目前，我在控制器中有以下代码：

$(document).ready(function() {
    $('#svg').on('click', 'rect.info', dispInfo);
}

这可以根据需要使用，但似乎不是＆＃34; Angular＆＃34;办法。有没有更好的方法呢？

我尝试了以下看起来更有棱角的但却无济于事：

var elems = $('#svg rect.info');
elems.attr('ng-click', 'dispInfo()');
$compile(elems);

这成功地将ng-click指令添加到适当的元素，但它们不会触发。这可能是我打电话$compile的方式有问题吗？

Answer 1

为了更加棱角分明，为什么不能用指令包装你的svg矩形并添加ng-click作为指令模板的一部分？

我用你的代码看到的问题是，$ compile函数接受html模板。你可以尝试以下，

var elems = $('#svg rect.info'),
    $parent = elems.parent();

elems.attr('ng-click', 'dispInfo()');
elems = $compile(elems.html())($scope); // pass your scope variable instead of $scope
$parent.empty().append(elems);

Angular动态添加ng-click到许多元素

1 个答案: