Wir arbeiten an einer HTML-Seite, die eine Bootstrap-Tooltip auf einem bestimmten <span>-Tag verwendet. Für diejenigen, die noch nichts von Tooltip gehört haben, ist es ein Popup von Arten, das erscheint, wenn man den Mauszeiger über das Element hält, an das es angehängt ist. Hier ist ein Screenshot die <span> in Frage zeigt, und was passiert, auf schweben:Update der Winkelbereichsvariablen nicht in UI
Die hinter Prämisse der Tooltip Zugabe war, dass in dem Fall, dass wir den Text kürzen, würde die Tooltip eine Option für die Anzeige der gesamte Text.
Allerdings möchten wir nun den Tooltipp nur konditional zeigen, wenn im Text keine Ellipse vorhanden ist. Wir definierten die tooltip-enable Eigenschaft im <span>:
<span uib-tooltip="{{someName}}" tooltip-placement="right" tooltip-enable="{{showToolTip}}">{{someNameShortened}}</span>
Das Wichtigste hier ist tooltip-enable="{{showToolTip}}", die für diese Seite, um die Immobilie an eine Bereichs-Variablen in der Steuerung bindet. Und hier ist der relevant (und abgekürzt) Controller-Code:
mainApp.controller('repoListController',['$scope', '$rootScope', ...,
function($scope,$rootScope, ...) {
$scope.showToolTip = false;
var repositoryList= function(){
repositoryService.getRepositoryList(function(data) {
var repoList = data;
repoList.shortenedDisplayName = repositoryService.getShortRepoName(repoList.repoName, DISPLAY_NAME_MAX_LENGTH);
// if the repository's name be sufficiently large (i.e. it has an ellipsis)
// then show the tooltip. Otherwise, the default value is false (see above)
if (repoList.repoName.length > DISPLAY_NAME_MAX_LENGTH) {
$scope.showTooltip = true;
}
});
}
repositoryList();
}]);
Basierend auf der Forschung, die ich getan habe, die gemeinsame Lösung dafür, warum ein Wechsel zu einer Bereichs-Variablen wird in der Benutzeroberfläche nicht reflektiert ist $scope.$apply() zu laufen, oder etwas Variation dazu. Das Ausführen von apply(), wie ich es verstehe, wird Angular JS mitteilen, einen Digest-Zyklus auszuführen, der Änderungen im Bereich auf die Benutzeroberfläche überträgt. Versuchen Sie jedoch, einen apply() aus dem Code zu tun, der showToolTip schaltet Fehler verursacht. Ich habe den Wert von $scope.$root.$$phase überprüft, während ich den Code ausgeführt habe, der die Variable showToolTip aktualisiert, und die Phase war digest.
So jetzt bin ich ratlos, dies zu erklären. Wenn der Code bereits in einem Digest enthalten ist, warum werden Änderungen dann nicht in der Benutzeroberfläche angezeigt? Wenn der Code bereits in Digest enthalten ist, wie kann ich dann Angular dazu zwingen, die Änderungen an der Benutzeroberfläche zu synchronisieren?
Versuchen Entfernen des '{{...}}', dh 'Tooltip-enabled = "showtooltip"
$scope.showToolTip(zwei Kapital "T" s) sein' . Interpolation ist für Strings, nicht booleans – Phil@Phil Ich werde das jetzt versuchen. Die Sache ist, nach der Überprüfung der Seite sah ich 'tooltip-enabled =" false "'. –
Ja, aber die Zeichenfolge '" false "' ist * truthy * – Phil