弹出框不适用于 ng-bind-html

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类似，就像我在cmets里说的那样。所以你需要在将 HTML 插入标签之后再编译一次 HTML。

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

更新

这是你的plnkr的分支

以我的拙见，最好创建将$watch 传递给消息的指令，在没有任何外部函数的情况下对其进行清理并重新编译。