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

Question

我正在尝试创建一个弹出指令。

我想为此使用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-酥料饼，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

你需要更新你的UI，引导到〜0.14.x

Answer 2

你可能已经找到了解决办法了，所以这可能是有类似问题的未来的读者（如我）。

我们需要在UI的引导文件​​，它说仔细一看：

还有的酥料饼的两个版本：uib-popover和uib-popover-template：

• uib-popover只需要文字和意志转义任何为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。