Вложенный ng-повтор с ng-bind- html

Question

Я хочу отобразить список виджетов на странице из моего контроллера. Каждый виджет имеет свою собственную функцию рендеринга, которая возвращает безопасную 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);
}

Как вы можете видите, у меня есть ng-bind-html внутри моего ng-repeat, который вызывает функцию с именем. render(), расположенную внутри widget:

this.render = function() {
  var html = "";
  html += "<div ng-repeat='choice in widget.choices'>";
  html += "{{choice.name}}";
  html += "</div>";
  return $sce.trustAsHtml(html);
}

У меня также есть директива, которую я использую для $compile выше HTML строка в AngularJS.

Если я запускаю приведенный выше код, функция widget.render() вызывается просто отлично, но вывод на странице будет выглядеть так: {{choice.name}}, а не значение внутри choice.name.

Как видите, я пытаюсь сделать еще один ng-repeat внутри ng-bind-html с помощью объекта widget из моего первого ng-repeat.

Это даже возможно, что я пытаюсь сделать здесь (я новичок в AngularJS)? Если да, то что я делаю не так? Или есть другой способ решить мою проблему?

Я использую последнюю версию AngularJS (v. 1.7.9).

ОБНОВЛЕНИЕ

Мне кажется, я знаю проблему. Когда я вызываю мою первую функцию $scope.renderWidgets(), возвращаемая HTML будет автоматически компилироваться (первая ng-repeat), и в этот момент запускается ng-bind-html, возвращая не скомпилированную строку HTML. Теперь я должен выяснить путь к $compile возвращенному HTML из моей директивы ng-bind-html.

Я на правильном пути?

Answer 1

Директива ng-bind-html связывает только HTML. Он не компилируется HTML. Это было преднамеренное решение команды AngularJS, чтобы избежать проблем с безопасностью.

Вы заявляете, что у вас есть директива, которая компилирует HTML. Давайте предположим, что директива: ¹

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

Для получения дополнительной информации см.

• Компиляция динамических c HTML строк из базы данных - этот ответ