Javascript 使用ng-bind-html嵌套ng-repeat

我想从我的控制器呈现页面上的小部件列表。每个小部件都有自己的呈现函数，该函数返回一个安全的HTML字符串

我的

ng repeat

（外层）的第一部分如下所示：

$scope.renderWidgets = function() {
  var html = "";
  html += "<div ng-repeat='widget in widgets'>";
  html += "<div ng-bind-html='widget.render()'></div>"
  html += "</div>";
  return $sce.trustAsHtml(html);
}

我还有一个指令，用于

$compile

将上述HTML字符串编译成AngularJS

如果我运行上面的代码，

widget.render（）

函数会被很好地调用，但是页面上的输出将如下所示：

{{choice.name}

而不是

choice.name

中的值

如您所见，我正在尝试使用我的第一个

ng repeat

中的

widget

对象在

ng bind html

内部执行另一个

ng repeat

这可能是我在这里尝试做的事情吗（我对AngularJS是新手）？如果是，那么我做错了什么？还是有别的办法解决我的问题

我正在使用最新的AngularJS（1.7.9节）

更新

我想我知道这个问题。当我调用我的第一个函数

$scope.renderWidgets（）

时，返回的HTML将被自动编译（第一个

ng repeat

），此时

ng bind HTML

将被触发，返回一个未编译的HTML字符串。现在，我必须找到一种方法，从我的

ngbindhtml

指令中编译返回的HTML

---

我走对了吗？

指令只绑定html。它不编译HTML。这是AngularJS团队为避免安全问题而做出的深思熟虑的决定

您声明您有一个编译HTML的指令。让我们假设指令是：

然后在嵌套代码中使用它：

$scope.renderWidgets = function() {
  var html = "";
  html += "<div ng-repeat='widget in widgets'>";
  ̶h̶t̶m̶l̶ ̶+̶=̶ ̶"̶<̶d̶i̶v̶ ̶n̶g̶-̶b̶i̶n̶d̶-̶h̶t̶m̶l̶=̶'̶w̶i̶d̶g̶e̶t̶.̶r̶e̶n̶d̶e̶r̶(̶)̶'̶>̶<̶/̶d̶i̶v̶>̶"̶
  html += "<div dynamic='widget.render()'></div>"
  html += "</div>";
  return $sce.trustAsHtml(html);
}

$scope.renderWidgets=function（）{
var html=“”；
html+=“”；
̶h̶t̶m̶l̶+̶=̶“̶”
html+=“”
html+=“”；
返回$sce.trustAsHtml（html）；
}

有关详细信息，请参阅

• -

---

谢谢你，它很有魅力。我还要提醒其他人，我必须从第二次

ng repeat

中删除

$sce.trustAsHtml（）

，以避免出现无限摘要循环错误。

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

$scope.renderWidgets = function() {
  var html = "";
  html += "<div ng-repeat='widget in widgets'>";
  ̶h̶t̶m̶l̶ ̶+̶=̶ ̶"̶<̶d̶i̶v̶ ̶n̶g̶-̶b̶i̶n̶d̶-̶h̶t̶m̶l̶=̶'̶w̶i̶d̶g̶e̶t̶.̶r̶e̶n̶d̶e̶r̶(̶)̶'̶>̶<̶/̶d̶i̶v̶>̶"̶
  html += "<div dynamic='widget.render()'></div>"
  html += "</div>";
  return $sce.trustAsHtml(html);
}