angularjs - ui.bootstrap-directive 与 uib-popover-html 不起作用

Question

我正在尝试使用 popover 创建一个指令。

我想为此使用 ui.bootstrap 。不幸的是它没有显示任何东西。
这里是 plunker举个例子。

<div>
  Popover uib (notworking- uib-popover-html)  ->
  <div mydirectiveuib ng-model="name"></div>
</div>

app.directive('mydirectiveuib', function(){
    return{
        restrict: 'EA',
        replace: true,
        scope: {
            ngModel: '='
        },
        template: ' <span class="test">aaa<img  popover-trigger="mouseenter" popover-placement="right" uib-popover-html="<h2>{{ngModel}}</h2>" width="20" height="20" src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/48/Folders-OS-Info-Metro-icon.png" alt="info icon" /></span>',
        link: function(scope, iElement, iAttrs) {
        }
  };
})

如果我改变 uib-popover-html 仅限 弹出框这是工作。

<div>
   Popover (working) -> 
   <div mydirective ng-model="name"></div>
</div>

app.directive('mydirective', function(){
        return{
            restrict: 'EA',
            replace: true,
            scope: {
                ngModel: '='
            },
            template: ' <span class="test">aaa<img  popover-trigger="mouseenter" popover-placement="right" popover="<h2>{{ngModel}}</h2>" width="20" height="20" src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/48/Folders-OS-Info-Metro-icon.png" alt="info icon" /></span>',
            link: function(scope, iElement, iAttrs) {
            }
      };
    })

知道我做错了什么以及如何解决吗？

Answer 1

您可能已经找到了解决方案，所以这可能适用于 future 有类似问题的读者(就像我一样)。
我们需要仔细查看 ui-bootstrap 文档 here ，其中说:

There are two versions of the popover: uib-popover and uib-popover-template:

• uib-popover takes text only and will escape any HTML provided for the popover body.
• uib-popover-html takes an expression that evaluates to an html string. The user is responsible for ensuring the content is safe to put into the DOM!
• uib-popover-template takes text that specifies the location of a template to use for the popover body. Note that this needs to be wrapped in a tag.

所以 uib-popover-html 的论点是 计算结果为 html 字符串的表达式 ，而不是 html 字符串本身。所以你可以有:

...
template: '<ANY ... uib-popover-html="popoverHtml" ... >',
link: function(scope, iElement, iAttrs) {
  scope.popoverHtml = '<div><h2>{{ngModel}}</h2><p>Hello {{ngModel}}</p></div>';
} 

但是，这并不能正常工作，因为它可能不安全，并且“用户有责任确保内容可以安全地放入 DOM”。要使其发挥作用，需要了解并实现 strict contextual escaping .这就是我放弃 HTML 方法的地方，转而使用 uib-popover-template。 .
不要问我为什么这样更安全，但是您的自定义指令的以下模板有效:

...
template: '<ANY ... uib-popover-template="\'popover.html\'" popover-trigger="mouseenter" ... > Popover </ANY>',
// NB need to escape the single 's    here ^    and here ^
...

请注意 uib-popover-template “获取指定模板位置的文本”，该位置需要呈现为 "'popover.html'"所以单引号需要在指令的内联模板中转义(或使用外部模板)。
其他需要纠正的地方:

确保 angular.js 的版本和 ui-bootstrap-tpls.js是最新的。

确保 ui-bootstrap已正确注入(inject)应用程序(你有 @Kosmno 但我没有!)

确保应用程序在使用 ng-app 的元素上启动

这里是 your working plunker ，以及 another one I made .