已更新

Question

我试图动态加载弹出我的代码是

$scope.setStatusMessage = function (message) {
    var lblClass = "", status = "" , template;
        lblClass = "label label-danger";
        status = "failed";
    template = '<label popover="' + message + '" popover-trigger="mouseenter" class="' + lblClass + '">' + status + '</label>';
    return $sce.trustAsHtml(template);
}

我的HTML是

<span data-ng-bind-html="setStatusMessage(statusMessage)"></span>

问题是html代码正在运行但是popover无法正常工作。我可能知道修复的问题。

谢谢

已更新

好的家伙是Plunker

Answer 1

以下是一些解决方法：http://plnkr.co/edit/pferF3otkczQo9TJbKck?p=preview

directive('compileHtml', function($compile) {
        return {
          restrict: 'A',
          scope: {
            messageFn: '&',
            message: '='
          },
          link: function(scope, iElement, iAttrs) {
            scope.$watch('message', function(message) {
              var html = scope.messageFn({'message': message});
              iElement.html(html);
              $compile(iElement.contents())(scope);
            });
          }
        }
      });

实际上它与question类似，正如我在评论中所说的那样。因此，在将HTML插入标记后，您需要再次编译HTML。

所以我创建了指令compileHtml，您应该传递返回已清理的HTML（代码中为message-fn）的函数，并为该函数提供参数（代码中为message）。指令监视message更新HTML的更改并重新运行编译。

<强>更新

这是您plnkr

的分支

在我看来，最好创建一个指令$watch而不是消息，在没有任何外部函数的情况下清理它并重新编译。

Popover无法使用ng-bind-html

已更新

1 个答案: