Javascript Angular动态地将ng单击添加到多个元素

我有一个Ionic应用程序，它有一个带有许多矩形的SVG对象（例如

）。我想在每个指令中添加一个

ng click

指令，而无需对每个指令进行检查并手动附加

ng click

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

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

这可以根据需要工作，但似乎不是“有角度”的方式。有更好的方法吗

我曾尝试过以下似乎更具棱角的方法，但没有效果：

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

---

这将成功地将ng click指令添加到适当的元素中，但它们不会触发。这可能是我调用

$compile

的方式有问题吗？

为了更具角度，为什么不能用指令来包装svg矩形，并将ng单击添加为指令模板的一部分

我看到代码中的问题是，$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);

---

为了更具角度感，为什么不能用指令包装svg矩形并添加ng单击作为指令模板的一部分

我看到代码中的问题是，$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);

---

嗯，这似乎和以前一样——没有效果。当我输入一个

console.log（elems.html（））

时，我已经更新了我的答案，但我不确定elems.html（）为什么什么都不返回。如果您可以在JSFIDLE中复制它，请共享它以进一步检查。嗯，这似乎和以前一样——没有效果。当我输入一个

console.log（elems.html（））

时，我已经更新了我的答案，但我不确定elems.html（）为什么什么都不返回。如果您可以在JSFIDLE中复制它，请共享它以进一步检查。