如何在 ui-bootstrap 工具提示中呈现自定义指令答案

【问题标题】：How to render custom directive inside ui-bootstrap tooltip如何在 ui-bootstrap 工具提示中呈现自定义指令
【发布时间】：2017-12-18 16:44:41
【问题描述】：

我有以下代码

// 模板

<span>
    hello world!
</span>

// 指令

'use strict';

var referenceFieldTemplate = require('./reference-field.html');

module.exports = directiveFunction;

/* @ngInject */
function directiveFunction($http) {
  return {
    restrict: 'E',
    scope: {
      fieldName: '=',
      fieldValue: '='
    },
    templateUrl: referenceFieldTemplate,
    controller: function($scope){
      console.log($scope);
    },
    link: function(scope, element, attr) {
      element.bind('mouseover',function(e) {
        console.log(e);
      });
    }
  }
}

我正在尝试使用以下代码在 uib-tooltip 中呈现自定义指令

function eventRender(event, element, view) {
    var hoverMarkup = '\'<reference-field field-name="test" field-value="test"></reference-field>\''
    element.attr({
      'uib-tooltip-html': hoverMarkup,
      'tooltip-append-to-body': true,
      'tooltip-class': 'tooltip-wrapper'
    });
    $compile(element)($scope);
};

编译后，该指令在 DOM 中不存在。我想了解它没有被渲染的原因。控制台没有错误。

提前致谢。

【问题讨论】：

我猜不完全重复但很有帮助：stackoverflow.com/questions/26541864/…

标签： angularjs angular-ui-bootstrap

【解决方案1】：

我最近使用“uib-tooltip-template”做了类似的事情，将你所有的html代码放在模板中，它就可以正常工作了。

您只需要创建一个包含指令的 html 文件，并通过 $scope 将其分配给工具提示。

【讨论】：