onclickを使用せずにng-repeatでイベントを処理する方法

Question

現在、クロム拡張機能を構築中です。 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

クロムセキュリティポリシーでは、ng-clickが許可されているようです。 https://developer.chrome.com/apps/angular_framework

Answer 2

datalayerはどこから来ていますか？コントローラやサービス内にグローバル変数 を使用しないでください。必要なものを注入してください。

私はあなたが$scope.data、 に割り当てる設定したときに値を持たないdatalayerを推測するのではなくあるでしょう、おそらくどこか $http.getによって作られた、いくつかの点で解決されるPromise ？あなたはおそらく

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)を行うことができます

その場合は、（あなたが注入されたサービスで価値を生み出す必要があることを今のところ無視しては） 角度が レンダリングが完了するまで、あなたのコードが実行を待つようになりますDOM（実際には、スタックがクリアされた後にJavaScriptがコードを実行します）。