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。