Angular $ Uhr löst nicht aus

Question

Ich habe eine Texteingabe mit eonasdan datetimepicker. Es gibt einen Bootstrap Tooltip dafür. Ich möchte den Tooltip ausblenden, wenn der Datetimper aktiv ist.

Es gibt CSS-Klasse (.bootstrap-datetimepicker-widget), wenn die Datetime-Picker aktiv ist. Ich habe versucht, die Anzahl der Elemente zu erhalten, die diese CSS-Klasse hat. Ich habe diese Nummer auch beim Debugging durch den Firebug. (Ich schrieb Winkel Richtlinie für Datetimepicker und die Tooltips)

.jsfile

$scope.noOfDateTimePickers = $('.bootstrap-datetimepicker-widget').length; 

    $scope.$watch('noOfDateTimePickers',function(newValue, oldValue){ 
     if(newValue>0){ 
     $('.dateTimePickerToolTips').removeAttr("data-original-titile"); 
     }else{ 
     $('.dateTimePickerToolTips').attr("data-original-titile", $scope.message); 
     } 
    }); 

.html fle

<div datetimepicker> 
    <a class data-toggle="tooltip" ng-attr-title="{{tooltipMessage}}" tooltip> 
    <input type="text" ng-model="startTime"> 
    </a> 
</div> 

jemand mir auf diesem helfen kann, wenn es einige Probleme mit meinem Code?

Answer 1

Ihr Problem hier ist, dass Ihr jQuery-Aufruf eine einmalige DOM-Suche durchführt, die dann in Ihrem $scope.noOfDateTimePickers gespeichert wird. Da diese DOM-Suche einmal erfolgt, ändert sich Ihre $ scope-Variable niemals, was niemals Ihre Triggerfunktion aufruft.

$scope.noOfDateTimePickers = $('.bootstrap-datetimepicker-widget').length //Called once and is never updated

Meine Empfehlung ist, einen Weg zu finden, von diesem einmaligen jQuery Aufruf wegzukommen die Anzahl der Widgets auf der Seite, um zu bestimmen, und stattdessen hat eine Reihe von Objekten, die Ihre Widgets darstellen und ausführen Logik basierend auf diesem Objekt.