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

问题描述

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

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

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

 $scope.posts = [{_id: "1",标题:《伦敦地图》}, {_id: "2",标题:巴西地图"}, {_id: "3",书名:《美国地图》}];$scope.posts.forEach(function(post) {//console.log(post);createElement("#objectMapParent-" + post._id, function() {//追加后在此处创建地图});});

这个回调函数获取一个选择器 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 中复制了代码，它可能会有所帮助.

解决方案

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

任何操作 DOM 的 jQuery 代码都应该封装在一个自定义指令中，以便它当 AngularJS 框架ng-repeat 指令实例化元素时执行.>

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

app.directive(myElement", function() {返回 {链接:postLink，};功能 postLink(范围，元素，属性){var post = scope.$eval(attrs.post);var html = `<div id="objectMap-${post._id}"><div id="BasemapToggle-${post._id}">

`;elem.append(html);}})

要使用 jQuery，只需确保它在 angular.js 文件之前加载.

有关详细信息，请参阅

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

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>

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 
    });
  });

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();
  };

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

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

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

解决方案

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);
    }
})

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

For more information, see

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

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