Konnte keine aktive Klassenlänge ohne Zeitüberschreitung erhalten

Ich versuche, die aktive Klassenlänge basierend auf dem Klicken zu bekommen. Wenn ich Timeout verwende, bekomme ich nur die genaue Anzahl. Wie kann ich erreichen, ohne Timeout zu verwenden, um genaue aktive Klassenlänge zu erhalten.Konnte keine aktive Klassenlänge ohne Zeitüberschreitung erhalten

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t 
 
\t <style> 
 
\t \t a { 
 
\t \t \t text-decoration:none; 
 
\t \t } 
 
\t \t .active { 
 
\t \t \t color:orange; 
 
\t \t } 
 
\t </style> 
 
\t 
 
</head> 
 
<body ng-app="sample"> 
 

 
<div ng-controller="test"> 
 
<div data-ng-init="names=[{name:'XML'},{name:'Java'},{name:'Tutorial'}]"> 
 
     <ul> 
 
      <li data-ng-repeat="myObject in names"><a href="javascript:void(0);" ng-model="toggle" ng-class="toggle ? 'active' : ''" ng-click="toggle=!toggle; getActiveLength();">{{myObject.name}}</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
<script type="text/javascript"> 
 
\t angular.module('sample',[]).controller('test', function($scope, $timeout){ 
 
\t \t $scope.getActiveLength = function() { 
 
\t \t \t $timeout(function(){ 
 
\t \t \t \t var total = angular.element(document.querySelectorAll(".active")).length; 
 
\t \t \t \t console.log("Length " + total); 
 
\t \t \t 
 
\t \t \t },500) 
 
\t \t } 
 

 
\t }) 
 
</script> 
 
</body> 
 
</html>

empfehlen Sie mir bitte für bessere Lösungen.

Quelle

2017-11-10 vadlamani

Es gibt Paare von Dingen, die passieren, wenn Sie auf Anker-Tag klicken:

toggle Wert
getActiveLength() genannt wird

Wenn getActiveLength() genannt wird, obwohl der Wert von toggle geändert wird, wird es nicht auf DOM reflektieren, da Winkel $digest Prozess nicht abgeschlossen ist. Daher müssen Sie nach dem Digest-Prozess nach aktiven Elementen suchen, indem Sie $scope.$$postDigest verwenden.

angular.module('sample',[]).controller('test', function($scope){ 
 
    $scope.getActiveLength = function(myObject) { 
 
    $scope.$$postDigest(function() { 
 
     var total = angular.element(document.querySelectorAll(".active")).length; 
 
     console.log("Length " + total); 
 
    }); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
<body ng-app="sample"> 
 
    <div ng-controller="test"> 
 
    <div data-ng-init="names=[{name:'XML'},{name:'Java'},{name:'Tutorial'}]"> 
 
     <ul> 
 
      <li data-ng-repeat="myObject in names"> 
 
      <a href="javascript:void(0);" ng-class="toggle ? 'active' : ''" ng-click="toggle=!toggle; getActiveLength();">{{myObject.name}} 
 
      </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-11-10 04:09:42 MrNobody

Vielen Dank für Ihre Lösung, Sorry seine nicht mit AngularJS Version arbeiten. Ich möchte Version 1.6.1 verwenden – vadlamani

@vadlamani Ich habe Update-Skript auf ' 1.6.1' und es scheint gut zu funktionieren. Teilen Sie Ihren Code, um Ihnen besser zu helfen! – MrNobody

In der Version 1.6.1, während wir auf das erste Auswahlelement klicken, wird die Länge als 0 angezeigt. Bitte einmal prüfen. – vadlamani

Konnte keine aktive Klassenlänge ohne Zeitüberschreitung erhalten

Antwort

Verwandte Themen