Question

我有以下代码

//模板

<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中没有该指令。我想了解它没有被渲染的原因。控制台中没有错误。

提前致谢。

Answer 1

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

你只需要在你的指令里面创建一个html文件，然后通过$ scope将它放到工具提示中。

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

1 个答案: