Question

我正在尝试编写一个指令，该指令返回一个uib angular bootstrap html popup，其中填充了来自外部源的html。

设想用法：

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

我无法这样做，因为uib-popover-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-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？

1 个答案: