Wie benutzerdefinierte Richtlinie innerhalb ui-Bootstrap-Tooltip

Question

Ich habe folgenden Code

// Template

<span> 
    hello world! 
</span> 

// Richtlinie

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

Ich versuche, benutzerdefinierte Richtlinie machen, in machen Uib-Tooltip mit folgendem Code

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

Nach der Kompilierung ist die Direktive nicht in DOM vorhanden. Ich möchte den Grund verstehen, warum es nicht gerendert wird. In der Konsole sind keine Fehler aufgetreten.

Vielen Dank im Voraus.

Answer 1

Ich habe vor kurzem etwas ähnliches mit "uib-tooltip-template" gemacht, setzen Sie alle Ihre HTML-Code in die Vorlage und es wird gut funktionieren.

Sie müssen nur eine HTML-Datei mit Ihrer Direktive erstellen und sie über $ scope an die QuickInfo zuweisen.