Angular: How to use variable in HTML getElementById

Question

I am using ng-repeat to create multiple divs with modals, which I open by getElementById. When I hardcode the id (eg 'modalId'), it works but not if I try to use a variable. How do I make it work?

<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>

The p.id I want to use (line 2) is an int.

Answer 1

From the docs: Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions (such as ng-click instead of onclick) instead.

See here: https://docs.angularjs.org/error/$compile/nodomevents .

Example:

$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

check this

https://docs.angularjs.org/error/ $compile/nodomevents

you must be getting the below warning in your console.

Interpolations for HTML DOM event attributes are disallowed.

This error occurs when one tries to create a binding for event handler attributes like onclick, onload, onsubmit, etc.

There is no practical value in binding to these attributes and doing so only exposes your application to security vulnerabilities like XSS. For these reasons binding to event handler attributes (all attributes that start with on and formaction attribute) is not supported.