AngularJS добавляет HTML в элемент ng-repeat

avatar
krekto
28 апреля 2019 в 22:07
578
1
2

Используя AngularJS, мне нужно добавить HTML к элементам ng-repeat, используя селектор: 'objectMapParent-' + post._id

  <div ng-repeat="post in posts">

    <div id="{{ 'objectMapParent-' + post._id }}">
      <h5 style="color:blue; margin-top: 3px;">{{post.title}}</h5>

    </div>
  </div>

поэтому я создал цикл для перебора элементов массива сообщений, где для каждого элемента я вызываю функцию: createElement

 $scope.posts = [{
    _id: "1",
    title: "map of london"
  }, {
    _id: "2",
    title: "map of brazil"
  }, {
    _id: "3",
    title: "map of usa"
  }];

  $scope.posts.forEach(function(post) {
    // console.log(post);

    createElement("#objectMapParent-" + post._id, function() {
      //create map here after append 
    });
  });

Эта функция обратного вызова получает селектор elementParent, который мы используем для поиска узла в DOM, а затем добавляем желаемый HTML

  var createElement = function(elementParent, cb) {

    var aux = elementParent;

    var postId = aux.replace("#objectMapParent-", "");

    var myElement = angular.element(document.querySelector(elementParent));

    var html = "<div id='objectMap-" + postId + "'><div id='BasemapToggle-" + postId + "'></div></div>";
    myElement.append(html);

    cb();
  };

Но что-то не работает, насколько я понимаю, функция document.querySelector не может найти селектор.

Мне кажется, что когда он пытается выбрать, узел еще не существует в DOM.

Я воспроизвел код в codepen, это может помочь.

Источник
Alon Eitan
28 апреля 2019 в 22:50
0

Не уверен, что понимаю, почему вы не строите эту структуру непосредственно из представления, потому что вам нужно создать эту карту после добавления? Поскольку вы можете использовать директиву ngInit и вызывать эту функцию из представления

Rannie Aguilar Peralta
28 апреля 2019 в 22:53
0

Почему вы пытаетесь сделать это вручную? В чем проблема с шаблоном angularjs?

krekto
29 апреля 2019 в 01:46
0

@AlonEitan Я не могу использовать document.querySelector для элемента ng-repeat. Я не понимаю почему. Это очень важно для моего проекта.

georgeawg
29 апреля 2019 в 03:35
1

Избегайте манипуляций с DOM в контроллерах. Вместо этого добавьте DOM с помощью пользовательских директив. Это особенно актуально при работе с директивой ng-repeat, которая добавляет и уничтожает DOM в процессе своей работы. Объект querySelector не может найти элемент, поскольку директива ng-repeat еще не добавила его.

Ответы (1)

avatar
georgeawg
29 апреля 2019 в 02:30
2
krekto
29 апреля 2019 в 03:29
0

@ georgeawg Вы абсолютно правы, однако я добавляю виджеты додзё, которые выдают ошибку, когда я добавляю их ng-repeat, я хотел попробовать добавить эти виджеты контроллером. Спасибо