如何将动态 html 与注入 angular bootstrap 弹出窗口的指令一起使用？

Question

我正在尝试编写一个指令，returns 一个 uib angular bootstrap html 弹出窗口填充了来自外部源的 html。

设想的用法：

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

我无法这样做，因为 uib-popover-html 需要 "expression that evaluates to an HTML string" 而不是 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-popover-template" 而不是 "uib-popover-html" 的解决方法：

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

如何将动态 html 与注入 angular bootstrap 弹出窗口的指令一起使用？

How to use dynamic html with a directive that injects an angular bootstrap popover?

javascript

angularjs

angularjs-directive

angular-bootstrap