Question

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

我正在做这个对象数组的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，您可以在其中检查运行的整个代码

Answer 1

Try Directives. See demo here

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

.red {
  background-color: red
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

＆＃13;

<!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>

＆＃13;

在每个ng-repeat中插入新的html元素（AngularJS）

2 个答案: