Угловая: Как использовать переменную в HTML getElementById

Question

Я использую ng-repeat для создания нескольких div с модалами, которые я открываю getElementById. Когда я жестко кодирую идентификатор (например, «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)"> 

Answer 2

проверить это

https://docs.angularjs.org/error/ $ компилировать/nodomevents

вы должны быть получив ниже предупреждение в консоли.

Интерполяции для атрибутов событий HTML DOM запрещены.

Эта ошибка возникает, когда один пытается создать привязку для обработчика событий атрибутов, как OnClick, OnLoad, onsubmit и т.д.

Там нет никакого практического значения в связывании этих атрибутов и делает это только обнажает приложение к безопасности таких как XSS. По этим причинам привязка к атрибутам обработчика событий (все атрибуты, начинающиеся с атрибута on и formaction) не поддерживается.