Bootstrap popover 指令逻辑在 AngularJS 自定义指令中不起作用答案

【问题标题】：Bootstrap popover directive logic not working inside AngularJS custom directiveBootstrap popover 指令逻辑在 AngularJS 自定义指令中不起作用
【发布时间】：2013-12-09 20:24:32
【问题描述】：

设置： angularjs v1.2.3，ui-bootstrap tpl 0.4.0

问题： 来自自定义指令“里程碑”内的 UI Bootstrap 的指令“popover”。 Milestone 指令被渲染，包括 popover 标记，但 popover 逻辑不起作用 - 显示和隐藏 popover。在移交给范围变量里程碑HTML之前尝试编译弹出框HTML，但没有成功。有任何想法吗？

代码：（非常简约以降低复杂性）

//Controller Variable
$scope.milestonesHTML;

//Usage in HTML
<milestone>
</milestone>

//Directive definition
directive('milestone', function( $compile ) {
return {
    restrict: 'E',

    template: '<span class="test" ng-bind-html="milestonesHTML"></span>',

    link: function(scope, iElement, iAttrs) {
        var milesHtml = '<img popover="End-to-end support" width="20" height="20" src="./img/info.png"/>';
        var compiledMilesHtml = $compile(milesHtml)(scope);
        scope.milestonesHTML = compiledMilesHtml[0].outerHTML;
    }
};

Plunkr

我为此制作了一个 Plunkr，请参阅 here

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-directive

【解决方案1】：

在您的链接函数中，您正在编译和链接使用 popover 指令的img。

var milesHtml = '<img popover="End-to-end support" width="20" height="20" src="./img/info.png"/>';
var compiledMilesHtml = $compile(milesHtml)(scope);

这将 DOM 与事件和范围挂钩，并为您提供最终节点：compiledMilesHtml。然后，您将放弃所有这些，只将 HTML 绑定到您显示的 DOM 中

template: '<span class="test" ng-bind-html="milestonesHTML"></span>',

scope.milestonesHTML = compiledMilesHtml[0].outerHTML;

这只是文本，不知道事件是如何连接的，也不知道范围内的观察者或其他工作应该对您的元素做什么。剩下的就是原始的 DOM 转换。

如果您确实需要手动编译节点，您可以这样做并使用 jQuery 或 jQLite 将实际元素 compiledMilesHtml 插入到 DOM 中。但是，您的模板已经被编译、链接并插入到 DOM 中。没有任何其他特殊要求，您的 img 应该放在您的模板中，它可以正常工作。

template: '<span class="test"><img popover="End-to-end support" width="20" height="20" src="./img/info.png"/></span>'

演示here。我已更改传递给弹出框的属性以匹配自定义指令和 HTML 版本。

【讨论】：

完美！非常感谢。
感谢您为我节省了一些时间！