Доступ к динамическому идентификатору в js

Question

В HTML у меня есть div

<div class="row"  id='textdrag{{$index}}'>

Мне нужно использовать идентификатор для отображения контекстного меню на основе идентификатора, например.

$("#textdrag2").contextmenu(function (event) {  
    setcontextposition("text");
});

Но по какой-то причине контекстное менюне отображается.

Это прекрасно работает, когда я просто использую id = "textdrag" без $ index

Answer 1

Измените свой HTML-код на следующий

<div class="row" id="{{ 'textdrag' + $index }}"></div>

Answer 2

Почему это не работает при текущем подходе?

В основном ваш javascript запускается сразу после загрузки, но этот экземпляр textdrag{{$index}} не оценил значение $index.Поскольку событие не было привязано к этому DOM.

---

Я бы порекомендовал вам создать директиву для этой функциональности, которая обычно является жизнеспособным решением для игры с DOM в AngularJS.При таком подходе вам не нужно указывать уникальный идентификатор для каждого элемента.

<div class="row" context-menu>
   ...
</div>

Директива

app.directive('contextMenu', [function(){
   return {
      link: function(scope, element, attrs) {
         element.contextmenu(function (event) {  
            setcontextposition("text");
         });
      }
   }
}])

Answer 3

Почему бы вам не добавить класс вместо этого, и тогда у вас не будет нестабильного селектора на динамическом идентификаторе.Как правило, не рекомендуется использовать селектор, который изменится.

<div class="row text-drag-cls"  id='textdrag{{$index}}'>

$(".text-drag-cls").contextmenu(function (event) {  
    setcontextposition("text");
 });

Надеюсь, это поможет