Переменные Javascript, не обновленные после изменений Anuglarjs ng-repeat, внесенных в DOM

Question

У меня есть угловое приложение, которое извлекает данные из файла JSON, который заполняет веб-страницу с помощью шаблона директивы для пользователя, используя ng-repeat.

Когда страница изначально загружена, идентификатор (из файла JSON) в элементе (р) 1.

<p id="pollidholder" style ="display:none" ng-bind-html="item.id">{{item.id}}</p> 

После того, как пользователь нажимает на кнопку (Далее нг кнопкой мыши), идентификатор обновляется 2 в элементе <p> через шаблон директивы. Я использую ID для регистрации пользователей.

В моем заднем конце Javascript (uservotedd.js), я использую

var pollidholder1 = document.getElementById('pollidholder').innerHTML; 

извлечь идентификатор из <p> элемента.

Однако идентификатор не обновляется от 1 до 2 для хранителя var, хотя элемент <p> изменяется на самой странице.

Как обновить переменную Javascript после изменения элемента html <p>? Пожалуйста помоги. Я хотел бы избежать серьезного перезаписи моего кода. Обратите внимание, что сообщение Alert не обновляется, чтобы отражать изменение ID, когда пользователь нажимает кнопку отправки.

Пожалуйста, дайте мне знать, если у вас есть вопросы. В лучшем случае я новичок.

Вы можете найти пример здесь plunker https://embed.plnkr.co/3kIxhW2Iq5lKQm81csln/

Answer 1

Только не используйте onclick в вашем HTML здесь:

<div class="simple-button" onlclick="idchange()" ng-click="change()" style ="font-size: 4vw ">Next</div> 

Поместить все код idchange в change функции контроллера, и вы имеют доступ ко всем переменным, которые вам нужны. Например:

$scope.change = function() { 
    $scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length; 
    alert($scope.items[$scope.indexToShow].id); 
} 

Не пытайтесь капсулированию увернуться угловым, используя onclick вместо ng-click вызовет много путаницы для начинающих. Просто используйте ng-click, и с вами все будет в порядке.