ui.bootstrap- directrive с 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-поповер-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

Вам необходимо обновить пользовательский интерфейс-самозагрузка для ~ 0.14.x

Answer 2

Вы, возможно, нашли решение уже, так что это может быть для будущих читателей с подобными проблемами (как и я).

Мы должны внимательно посмотреть на Ui-самозагрузки документации here, в котором говорится:

Есть две версии пирог: uib-popover и uib-popover-template:

• uib-popover принимает только текст и будет избегайте любого HTML, предоставленного для тела popover.
• uib-popover-html принимает выражение , которое оценивает строку html. Пользователь несет ответственность за обеспечение безопасного хранения содержимого в DOM!
• uib-popover-template принимает текст, определяющий расположение шаблона для использования в корпусе popover. Обратите внимание, что это нужно обернуть в тег.

Так аргумент для 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.