Angular：如何在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行）是一个整数。

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

Answer 2

检查这个

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

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

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

当尝试为事件处理程序属性（如onclick，onload，onsubmit等）创建绑定时，会发生此错误。

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