Question

我目前正在构建Chrome扩展程序。 Chrome的政策是不允许使用内联JS事件处理程序，因此我正在寻找一种为ng-repeat元素创建事件侦听器的方法。

我尝试根据我传递给ng-repeat的数据集生成事件处理程序，因为我知道模板我已经能够生成相应的ID，但是我似乎无法正确计时，因此只有在ng-repeat完成更新DOM之后才设置事件监听器。

我目前的代码如下：

app.controller('commentsCtrl', function($scope) {
    $scope.data = datalayer;
    //console.log($scope.data);
    document.addEventListener('DOMContentLoaded', function(){

            for (var i = 0; i < datalayer.comments.length; i++){
                var id = datalayer.comments[i].id + "_replybutton";
                console.log(id);
                var div = document.getElementById(id);
                console.log(div);
                console.log(datalayer.sc);
            }

        });

    });

x_replybutton是我想为其创建侦听器的按钮的id格式。目前，我可以在重复部分加载后让上面的代码在控制台中正常工作，但是当我将它添加到控制器时它不会运行。

任何想法或建议都会非常感激。

Answer 1

您的datalayer变量来自哪里？你不应该使用控制器或服务中的全局变量，但注入你需要的东西。

我认为datalayer设置为$scope.data时没有值，但更像是Promise 这在某些时候得到解决，可能是由 $http.get某个地方？

如果是这种情况，（暂时忽略你应该在注入的服务中产生值）你可以做到

app.controller('commentsCtrl', function($scope, $timeout) {
    datalayer.then((datalayer) => {
        $scope.data = datalayer;
        $timeout(()=>{
            for (var i = 0; i < datalayer.comments.length; i++){
                var id = datalayer.comments[i].id + "_replybutton";
                var div = document.getElementById(id);
                div.addEventListener('click', function() {
                    console.log('clicked');
                });
            }
        }, 0);
    })
}

$timeout(()=>{ <code here> }, 0)将使您的代码等待执行，直到Angular完成渲染DOM（实际上是在堆栈清除后让JavaScript执行代码）。

Answer 2

Chrome安全策略允许显示ng-click。 https://developer.chrome.com/apps/angular_framework

如何在不使用onclick的情况下处理ng-repeat中的事件

2 个答案: