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 更改为 popover ，则表明它正在运行。

<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

您可能已经找到了解决方案，因此这可能适用于具有类似问题的未来读者（就像我一样）。

我们需要仔细查看ui-bootstrap文档here，其中说：

popover有两个版本：uib-popover和uib-popover-template：


uib-popover仅接收文本，并将转义为弹出框体提供的任何HTML。

uib-popover-html采用表达式，其值为html字符串。 用户有责任确保将内容安全放入DOM！

uib-popover-template使用文本指定模板的位置以用于弹出框体。请注意，这需要包含在标记中。

因此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 ^
...

NB当uib-popover-template“获取指定模板位置的文本时”，该位置需要呈现为"'popover.html'"，因此单引号需要在指令的内联模板中进行转义（或使用外部模板）。

要纠正的其他事项：

确保angular.js和ui-bootstrap-tpls.js的版本是最新的。
确保ui-bootstrap已正确注入应用程序（您有@Kosmno但我没有！）
确保使用ng-app

此处为your working plunker，以及another one I made。

Answer 2

您需要将ui-bootstrap更新为~0.14.x

使用uib-popover-html的ui.bootstrap- directrive不起作用

2 个答案: