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屬性開頭的所有屬性）。