Когда ng-init в ng-repeat является повтором? - PullRequest
Новая
       12

Когда ng-init в ng-repeat является повтором?

0 голосов
/ 07 мая 2018

У меня есть простой ng-repeat для создания списка HTML из массива javascript. Каждый элемент может быть перемещен с помощью ввода, чтобы получить новый ранг. Этот вход связан с переменной rank. Эта переменная инициализируется с использованием директивы ng-init.

Код выглядит так: 

<li ng-repeat="item in ctrl.getItems()">
  <div ng-init="rank = $index">
    [$index: {{$index}}]
    {{item}}<br/>
    <label>
      Move to
      <input type="number" ng-model="rank"/>
    </label>
    <button type="button" ng-click="ctrl.moveItem($index, rank)">
      Ok
    </button>
  </div>
</li>

Во время выполнения, когда я изменяю входное значение и нажимаю кнопку Ok, вызывается функция ctrl.moveItem, и элемент действительно перемещается в массив ctrl.getItems().

Таким образом, ng-repeat переигрывается, и предметы появляются в новом порядке.

НО переменная rank не инициализируется повторно и появляются 2 элемента с одинаковым рангом.

Образец здесь: https://jsfiddle.net/nlips/4ng34b7b/

Мой вопрос не столько о перемещении элементов в списке, но Мне нужно понять, как работает ng-init в контексте ng-repeat .

Я не нашел ничего по этому вопросу в официальной документации AngularJS.

1 Ответ

0 голосов
/ 07 мая 2018

С AngularJS документы:

Директива ngInit позволяет оценить выражение в текущей области.

Теперь. Вы работаете с другой областью.

enter image description here

Вы используете ngInit в включенной области , переопределяя $ scope.rank каждый раз, когда повторяет эту часть шаблона.

Если вы хотите сохранить свой ранг, вам следует ввести его в область действия ngRepeat .

Попробуйте с: 

<li ng-repeat="item in ctrl.getItems()" ng-init="rank = $index">
  [$index: {{$index}}]
  {{item}}<br/>
  <label>
    Move to
    <input type="number" ng-model="rank"/>
  </label>
  <button type="button" ng-click="ctrl.moveItem($index, rank)">
    Ok
  </button>
</li>

Отредактированный ответ

Хорошо, я понял. Выражение ngInit вычисляется только тогда, когда эта часть шаблона будет отображена в DOM.

Итак, когда страница загружается в первый раз, ваше выражение запускается, и каждый rank оценивается правильно.

Но когда вы вносите изменения в элемент, который уже отрендерен, ваш шаблон больше не будет визуализироваться , поэтому ваш ng-init не будет запущен.

Если вы хотите, чтобы ng-init был выполнен снова, вам необходимо удалить элемент из DOM и затем добавить его обратно в новую позицию.

Есть несколько альтернатив этому подходу, но я надеюсь, что это проясняет, что происходило.

...