角型ブートストラップ・ポップ・オーバーを注入する指令で動的HTMLを使用するにはどうすればよいですか？

Question

私は、外部ソースからhtmlを取り込んだuibの角度のブートストラップhtmlポップアップを返すディレクティブを書こうとしています。

想定使用状況：

<b help-pop="title1"> Title 1</b> 

UIB-ポップオーバー-HTML "はHTML文字列に評価される式" ではなくHTML文字列自体

help_texts = {title1:"This is <b>text</b> for <br> title 1", 
      title2: "This is text for title 2" 
} 

var app = angular.module('popTest',['ui.bootstrap']); 
app.controller('popCtrl', function ($scope, $sce) {}); 
app.directive('helpPop', function ($compile, $sce) { 
return { 

    restrict: 'A', 
    replace: false, 
    terminal: true, 
    priority: 1000, 
    compile: function compile(element, attrs) {   

    // plaintext works great for non-html 
    //it = help_texts[attrs.helpPop] 
    //element.attr('uib-popover', it); 

    /* 
    This does not work since uib-popover-html "Takes an expression that 
    evaluates to an HTML string" and not the HTML-string itself 
    ref https://angular-ui.github.io/bootstrap/ 
    */ 
    it = $sce.trustAsHtml(help_texts[attrs.helpPop]); 
    element.attr('uib-popover-html', it); 

    element.attr('popover-placement', 'auto top'); 
    element.attr('popover-trigger', 'mouseenter'); 
    element.addClass('helptxt'); 
    element.removeAttr("help-pop"); 
    element.removeAttr("data-help-pop"); 
    return { 
     pre: function preLink() {}, 
     post: function postLink(scope, ie) { 
     $compile(ie)(scope); 
     } 
    }; 
    } 
}; 
}); 

見込んでいるので、私はそうすることができません誰もこの仕事をする方法に関する提案はありますか？

Plunker

Answer 1

私が代わりに "UIB-ポップオーバー-HTML" の "UIB-ポップオーバー・テンプレート" を使用して回避策を見つけました：

help_texts = { 
      title1:"This is <b>text</b> for <br> title 1", 
      title2: "This is <i>text</i> for title 2" 
} 

var app = angular.module('popTest',['ui.bootstrap']); 
app.controller('popCtrl', function ($scope, $sce) {}); 
app.directive('helpPop', function ($compile, $sce) { 
return { 

    restrict: 'A', 
    replace: false, 
    terminal: true, 
    priority: 1000, 
    scope: {}, 
    compile: function compile(element, attrs) {   

    element.attr('uib-popover-template', "'popover.html'"); 

    element.attr('popover-placement', 'auto top'); 
    element.attr('popover-trigger', 'mouseenter'); 
    element.addClass('helptxt'); 
    element.removeAttr("help-pop"); 
    element.removeAttr("data-help-pop"); 
    return { 
     pre: function preLink() {}, 
     post: function postLink(scope, ie) { 
     $compile(ie)(scope); 
     scope.poptext = $sce.trustAsHtml(help_texts[attrs.helpPop]); 
     } 
    }; 
    } 
}; 
}); 

テンプレートはDOMに追加する必要があります

<script type="text/ng-template" id="popover.html"> 
    <div ng-bind-html='poptext'></div> 
</script> 

Updated plunker