$sce.trustAsHtml 返回值未被 $compile 编译

Question

我正在尝试使用 angular bootstrap-ui popover with fullcalendar's events as described here: Getting Angular UI Calendar to work with UI-Bootstrap Tooltips

制作一个带有 html 的自定义弹出框

但我需要使用更复杂的弹出窗口，需要使用 uib-popover-html 如下：

 $scope.eventRender = function( event, element, view ) { 

        var test = $sce.trustAsHtml('<b> Hello World! </b>');
        element.attr({'uib-popover-html':  test,
                     'popover-trigger' : 'mouseenter',
                     'popover-append-to-body': true});

        $compile(element)($scope);
    };

但是当它抛出以下错误时：

Error: [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 1 of the expression [ Hello World! ] starting at [ Hello World! ].

我做错了什么？

Answer 1

基于此 issue，我的假设是 uib-popover-html 甚至不打算工作。

但有解决方法：只需使用 uib-popover-template 代替：

$scope.eventRender = function(event, element, view) {
  element.attr({
    'uib-popover-template': "'myTooltipTemplate'",
    'popover-trigger': 'mouseenter',
    'popover-append-to-body': true
  });
  $compile(element)($scope);
};

这里有一个 fiddle 可以玩：http://jsfiddle.net/masa671/4wf31bkw/

$sce.trustAsHtml 返回值未被 $compile 编译

$sce.trustAsHtml returned value not compiled by $compile

angularjs

angularjs-directive

angular-ui-bootstrap

angularjs-compile

angular-directive