Angularjs ui.bootstrap-带有uib popover html的directrive不'；行不通

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

我想为此使用ui.bootstrap。不幸的是，它没有显示任何内容。 下面是一个例子

<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) {
        }
  };
})

Popover uib（不工作-uib Popover html）->
app.directive（'mydirectiveuib'，function（）{
返回{
限制：“EA”，
替换：正确，
范围：{
ngModel:“=”
},
模板：“aaa”，
链接：功能（范围、IELENT、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) {
            }
      };
    })

Popover（工作）->
app.directive（'mydirective'，function（）{
返回{
限制：“EA”，
替换：正确，
范围：{
ngModel:“=”
},
模板：“aaa”，
链接：功能（范围、IELENT、iAttrs）{
}
};
})

---

你知道我做错了什么以及如何修复它吗？

你需要将你的ui引导更新到~0.14.x

你可能已经找到了解决方案，所以这可能是为将来有类似问题的读者准备的（就像我一样）

我们需要仔细查看ui引导文档，其中说明：

popover有两个版本：

uib popover

和

uib popover模板

：

• uib-popover

  只接受文本，并将转义为popover主体提供的任何HTML

• 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>';
} 

注意：作为

uib popover模板

“获取指定模板位置的文本”，该位置需要呈现为

“'popover.html'”

，因此需要在指令的内联模板中转义单引号（或使用外部模板）

其他需要纠正的事项：

• 确保

  angular.js

  和

  ui bootstrap tpls.js

  的版本是最新的
• 确保将

  ui引导程序

  正确地注入到应用程序中（您有@Kosmno，但我没有！）
• 确保使用

  ng App

---

这是，还有。

它对我不起作用。这是plunker——它甚至不适用于文档中的演示代码：这是一个适用于0.14.3的版本，它更接近文档中的演示。你救了我一天！非常感谢。

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