AngularJS динамика c перекомпиляция внутри ng-повтор - PullRequest
Новая
       6

AngularJS динамика c перекомпиляция внутри ng-повтор

0 голосов
/ 16 марта 2020

У меня есть огромная таблица данных, отображаемая с AngularJS (1.7.x). Количество и сложность данных диктуют, что данные связаны один раз внутри ng-повтора следующим образом: 

<div ng-repeat="item in [{...}, {...}, ...] track by $index">
  <div>{{ ::item.col1 }}</div>
  <div>{{ ::item.col2 }}</div>
  ...
  <div>{{ ::item.colx }}</div>
</div>

Проблема возникает, когда я пытаюсь обновить некоторые ячейки, скажем, столбец 5 в строке 233. Это делается путем динамической перекомпиляции и повторной вставки той же самой разметки HTML в правильный узел DOM, но я просто не могу найти способ скомпилировать ее в текущем контексте.

Я следовал Angular js: динамически компилировать ng-repeat , но я просто не могу воспроизвести эффект "перекомпиляции". Все оценивается с помощью области, которую я предоставляю в $ compile (), которая, очевидно, не может видеть "item" из ng-repeat.

Редактировать: Я отформатировал HTML над a немного и добавил пример кода. Я не включил его в исходное сообщение, так как боялся, что это далеко от того, как это должно быть сделано, но вы правы, он может дать вам больше понимания.

Директива (взята из директивы, упомянутой в связанном ответе) : 

app.directive('recompile', function ($compile) {
  return {
    restrict: 'A',
    compile: function (element) {
      element.removeAttr('recompile');
      var compile = $compile(element);
      return function (scope, element) {
        compile(scope);
      }
    }
  }
});

Код, который пытается сделать AngularJS перепривязать ячейку: 

// by now, column 5 of row 233 got removed from DOM
// $prevnode points column 4 of row 233
var nodest = '<div recompile>{{ ::item.col5 }}</div>';
var comp = $compile(nodest)($scope);
$prevnode.after(comp);

Результатом всегда является пустая ячейка, поскольку "элемент" разрешается в неопределенное значение. Неважно, использую ли я директиву "пересобрать" или нет. Переменные $ scope разрешаются нормально.

1 Ответ

1 голос
/ 17 марта 2020

Наконец-то мне удалось решить мою проблему. По какой-то причине я не знал, что могу получить доступ к текущей области видимости через DOM, используя angular .element (...). Scope ()! Никаких директив или других хитростей не требуется, все просто: элемент 

// get current item's $scope
var $itemscope = $prevnode.scope();
var nodest = '<div>{{ ::item.col5 }}</div>';
// compile with the said scope
var comp = $compile(nodest)($itemscope);
$prevnode.after(comp);

теперь правильно разрешен, и ячейка отражает значение, которое было изменено в источнике данных ng-repeat.

...