Question

假设我们有这个波纹管标记（已经生成，所以我不能使用ng-repeat来显示它。）

<svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    ...
    <!-- more than 100 times -->
</svg>

这个jQuery代码的替代方案

$('path').click(function(){
    console.log('ok');
});

在AngularJS中，无需重复ng-click次n次？

Answer 1

我会创建一个路径指令：

app.directive('path', function() {
    return {
        restrict: 'E',
        scope: true,
        link: function(scope, element) {
            element.on('click', function() {
                 console.log('ok');
            });
        }
    }
});

ngRepeat将为每次迭代创建一个子范围，因此为了保留此范围，该指令设置为在指令定义中创建子范围（scope: true）。这样，每个路径元素都有自己的子范围，原型继承父范围，不会干扰其兄弟。

如果您还计划触发摘要周期来更新视图（这是ngClick自动执行的操作），则需要在Click处理程序中使用$ apply块包装代码。

link: function(scope, element) {
    element.on('click', function() {
         scope.$apply(function() {
             console.log('ok');
             scope.model = 'hello world'; // update the model, then trigger a digest.
         });
    });
}

Answer 2

创建将执行日志记录的directive或您真正想要的任何内容：

<svg>
    <path log-element></path>
    ...
    <!-- more than 100 times -->
</svg>

或者：

<svg log-inner-elements>
    <path></path>
    ...
    <!-- more than 100 times -->
</svg>

Answer 3

通过使用angular.element，您可以执行一些jquery功能。

无论其..

当以角度进行DOM操作时，建议使用指令（ng-click或create your own），以便保持关注点的分离，即角度方式。

AngularJS中多个元素的一个功能

3 个答案: