AngularJS在ng-repeat元素中附加HTML [英] AngularJS append HTML in the ng-repeat element

问题描述

使用AngularJS，我需要使用选择器将HTML附加到ng-repeat元素:'objectMapParent-'+ post._id

Using AngularJS I need to append HTML to the elements of ng-repeat, using the selector: '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>

所以我创建了一个循环以循环遍历posts数组的元素，对于每个元素，我在其中调用函数:createElement

so I created a loop to loop through the elements of the posts array, where for each element I call the function: 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

This callback function gets a selector, elementParent, which we use to find the node in the DOM, and then apend the desired 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函数找不到选择器.

But something does not work, as far as I'm concerned, the document.querySelector function can not find the selector.

在我看来，当尝试选择时，该节点在DOM中尚不存在.

It seems to me that when it tries to select, the node does not yet exist in the DOM.

我在 codepen 中复制了代码，可能会有所帮助.

I reproduced the code in the codepen, it might help.

推荐答案

如何将jQuery代码封装在自定义指令中

任何处理DOM的jQuery代码都应封装在自定义指令中，当AngularJS框架 ng-repeat指令实例化元素时执行.

How to Encapsulate jQuery code in a Custom Directive

Any jQuery code that manipulates the DOM should be encapsulated in a custom directive so that it is executed when the AngularJS framework ng-repeat directive instantiates the element.

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

app.directive("myElement", function() {
    return {
        link: postLink,
    };
    function postLink(scope,elem,attrs) {
        var post = scope.$eval(attrs.post);
        var html = `
          <div id="objectMap-${post._id}">
            <div id="BasemapToggle-${post._id}">
            </div>
          </div>
        `;
        elem.append(html);
    }
})

要使用jQuery，只需确保将其加载到angular.js文件之前即可.

To use jQuery, simply ensure it is loaded before the angular.js file.

有关更多信息，请参见

• AngularJS开发人员指南-创建自定义指令
• AngularJS angular.element API参考

• AngularJS Developer Guide - Creating Custom Directives
• AngularJS angular.element API Reference

这篇关于AngularJS在ng-repeat元素中附加HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！