将新的 html 元素插入每个 ng-repeat (AngularJS)答案

【问题标题】：Insert new html element into every ng-repeat (AngularJS)将新的 html 元素插入每个 ng-repeat (AngularJS)
【发布时间】：2017-10-31 21:46:47
【问题描述】：

我在想办法在 ng-repeat 的每个项目的 DOM 中插入 <p> 时遇到了一些麻烦。

我正在做这个对象数组的ng-repeat：

$scope.items = [
  {name: "john", paragraph:"<p>hi, im john</p>"}, 
  {name: "rita", paragraph:"<p>hi, im rita</p>"}, 
  {name: "joe", paragraph:"<p>hi, im joe</p>"}
];

然后在我的html文件中：

  <div ng-repeat="item in items">
    <br>
    <br>
    <p>this is the beginning of {{$index}} box</p>
    <p>{{item.name}}</p>
    {{insertHTML(item.paragraph)}}
    <p>this is the end of {{$index}} box</p>
    <br>
    <br>
  </div>

insert.HTML(str) 函数应该将每个 item.paragraph 上的字符串转换为 html 元素。函数如下：

$scope.insertHTML = function(str) {
  var wrapper = document.createElement('div');
  wrapper.innerHTML = str;
};

我创建了这个plunker，您可以在其中检查整个代码的运行情况

【问题讨论】：

如果你导入ngSanitize，我认为你可以用ng-bind-html="item.paragraph"来做到这一点

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

Try Directives. See demo here

var app = angular.module('plunker', []);
app.directive('myDir',function(){
  return{ 
    link : function(scope,element){
    element.append(' <br><br><p>this is the beginning of box</p>');
    element.append('<p>'+scope.item.name+'</p>');
    element.append(' <p>this is the end of box<br><br><br></p>');
  }}
})

app.controller('MainCtrl', function($scope) {
 $scope.items = [
  {name: "john", paragraph:"<p>hi, im john</p>"}, 
  {name: "rita", paragraph:"<p>hi, im rita</p>"}, 
  {name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
     <div ng-repeat="item in items">
       <my-dir></my-dir>
   
  </div>
  </body>

</html>

【讨论】：

【解决方案2】：

你应该使用Angular内置的ng-bind-html和ngSanitize：

angular.module("demo", ["ngSanitize"]);

angular
  .module("demo")
  .controller("demoController", ["$scope", "$sce", function($scope, $sce) {

    $scope.items = [{
        name: "john",
        paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
      },
      {
        name: "rita",
        paragraph: "<p>hi, im rita</p>"
      },
      {
        name: "joe",
        paragraph: "<p>hi, im joe</p>"
      }
    ];
  }])

.red {
  background-color: red
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="demoController">

  <p>hello everyone</p>

  <div ng-repeat="item in items">
    <br>
    <br>
    <p>this is the beginning of {{$index}} box</p>
    <p>{{item.name}}</p>
    <div ng-bind-html="item.paragraph"></div>
    <p>this is the end of {{$index}} box</p>
    <br>
    <br>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>

</html>

【讨论】：

非常感谢！就是这么简单！
这适用于简单的东西。但是如果段落是：'' 。它没有加载任何东西。您可以检查 plunker
iframe 不会自动被信任（有充分的理由） - 如果你必须明确使用 $sce.trustAsHtml，我已经更新了我的答案。