Javascript 角度：如何在HTML getElementById中使用变量

我使用ng repeat创建多个modals div，我通过getElementById打开它。当我硬编码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。

来自文档：不允许对HTML DOM事件属性进行插值。请改用ng版本（如ng click而不是onclick）

请参见此处：

示例：

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

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

HTML:

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

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

检查此项

$compile/nodomevents

您必须在控制台中收到以下警告

不允许对HTML DOM事件属性进行插值

当试图为onclick、onload、onsubmit等事件处理程序属性创建绑定时，会发生此错误

---

绑定到这些属性没有实际价值，这样做只会使应用程序暴露于XSS之类的安全漏洞。由于这些原因，不支持绑定到事件处理程序属性（所有以on和formaction属性开头的属性）。

当您“查看源代码”时/inspect是否看起来像是计算的？是，将显示其他答复中提到的插值错误。但是当我使用ng click时，会显示以下错误：错误：v0未定义。我不确定v0是什么？这是前两条错误行：错误：v0未定义匿名/fn@line 231>函数：2:738是显示提到的插值错误。但是当我使用ng click时，会显示以下错误：错误：v0未定义。我不确定v0是什么？这是前两行错误：错误：v0未定义/fn@ajax.googleapis.com/ajax/libs/angularjs/1.5.6/a‌​ngular.min.js第231行>函数：2:738如果你能创建一个你的代码的fiddle/plunker，v0未定义不应该是因为代码共享上面的例子解决了它。我会选择那个，但谢谢你的帮助。是的，显示了提到的插值错误。但是当我使用ng click时，会显示以下错误：错误：v0未定义。我不确定v0是什么？这是前两行错误：错误：v0未定义/fn@ajax.googleapis.com/ajax/libs/angularjs/1.5.6/a‌​ngular.min.js第231行>函数：2:738我添加了一个示例。这个示例有效。这是一个非常简单的解决方案。谢谢