javascript - Angular : How to use variable in HTML getElementById

Question

我正在使用 ng-repeat 创建多个带有模式的 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。

Answer 1

来自文档:不允许对 HTML DOM 事件属性进行插值。请改用 ng- 版本(例如 ng-click 而不是 onclick)。

请参见此处: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)">