Question

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

问题：自定义指令“里程碑”中的UI Bootstrap指令“popover”。 Milestone指令被渲染，包括popover标记，但是popover逻辑不起作用 - 显示和隐藏popover。试图在移交到范围变量里程碑HTML之前编译popover 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

Answer 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。我已经更改了传递给popover的属性以匹配自定义指令和HTML版本。

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

1 个答案: