Problem ToolTip in AngularJS

Dieser Code funktioniert nicht in meinem AngularJS Datei:Problem ToolTip in AngularJS

angular.element('document').ready(function() { $('.tooltipped').tooltip({delay: 50}); });

Aber wenn ich einen alarmiert innen, es erscheint die Warnmeldung auf. Der ToolTip-Code funktioniert nicht, obwohl ich alle erforderlichen materialisieren CSS und js Dateien enthalten habe. Es funktioniert gut, wenn ich den gleichen Code für ein statisches Element verwende, aber nicht mit einem dynamischen Element arbeite.

Quelle

2017-09-20 Prashant B

-1

Sie können für diese versuchen:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Tooltip - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $('#age').tooltip({delay: 50}); 
}); 

    </script> 
    <style> 
    label { 
    display: inline-block; 
    width: 5em; 
    } 
    </style> 
</head> 
<body> 

<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> 
<p>Hover the field to see the tooltip.</p> 


</body> 
</html>

Quelle

2017-09-20 12:48:39

Das ist, weil AngularJS die Vorlage rerenders so das DOM nicht das gleiche ist mehr und hat keinen Plugin daran befestigt. Bei angulajs funktionieren jQuery-Plugins aus diesem Grund meistens nicht, daher müssen Sie eine Direktive erstellen, die angularjs erlaubt, die Plugin-Initialisierung zu orchestrieren, damit das Plugin beim dynamischen Hinzufügen des neuen Elements angewendet wird.

versuchen, etwas wie folgt aus:

app.directive('tooltipped', function(){ 
    return { 
     restrict: 'C', 
     link: function (scope, elem, attrs) { 
      $(elem[0]).tooltip({delay: 50}); }); 
     } 
    }; 
});

Quelle

2017-09-20 12:48:46

Problem ToolTip in AngularJS

Antwort

Verwandte Themen