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

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

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

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

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

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

Answer 1

为了以更角度的方式，为什么不能用 directive 包裹你的 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);