角度：HTMLで変数を使用する方法getElementById

Question

私はgetElementByIdで開くモーダルで複数のdivを作成するためにng-repeatを使用しています。 idをハードコードすると（たとえば 'modalId'）、それは動作しますが、変数を使用しようとした場合は動作しません。私はそれをどのように機能させるのですか？

<div class="col-sm-4 col-md-4" ng-repeat="p in proj"> 
     <img class="myImg" ng-src="{{p.image}}" onclick="document.getElementById('{{p.id}}').style.display='block';"> 
     <div id="{{p.id}}" class="w3-modal" onclick="this.style.display='none';"> 
      <div class="w3-modal-content w3-animate-zoom"> 
      <img ng-src="{{p.image}}"> 
      </div> 
     </div> 
</div> 

使用したいp.id（行2）はintです。

Answer 1

文書から：HTML DOMイベント補間の補間は許可されていません。代わりにng-バージョン（onclickの代わりにng-clickなど）を使用してください。

ここをクリックしてください：https://docs.angularjs.org/error/$compile/nodomevents

例：

$scope.imgClicked = function(id){ 
    document.getElementById(id).style.display='block'; 
} 

HTML：

<img class="myImg" ng-src="{{p.image}}" ng-click="imgClicked(p.id)"> 

Answer 2

チェックこの

https://docs.angularjs.org/error/ $コンパイル/ nodomeventsあなたがなければなりません

あなたのコンソールで以下の警告が表示されます。

HTML DOMイベント属性の補間は禁止されています。

1は、これらの属性に結合し、そうすることには実用的な価値が唯一のセキュリティにアプリケーションが公開されていないイベントハンドラの結合はonclickのような属性を、オンロード、をonSubmitなどを作成するために

をしようとすると、このエラーが発生しますXSSのような脆弱性これらの理由から、イベントハンドラ属性（onおよびformaction属性で始まるすべての属性）へのバインドはサポートされていません。