Kann nicht manipulieren DOM in AngularJs Vorlage

Question

Ich habe eine Website mit Angularjs Vorlagen, ein SPA. In einem meiner Templates verwende ich ein Tab-Control aus der AngulrUI-Bibliothek namens Ui-Tabset.

Während das Steuerelement gerendert wird, wird ein ul -Element erstellt und eine CSS-Klasse nav-tabs hinzugefügt. Das steht im Konflikt mit vielen CSS-Einstellungen, die ich habe und macht es hässlich.

<uib-tabset active="activeJustified" justified="true" id="tabs"> 
 
    <uib-tab class="hvr-underline-from-center" index="0" heading="שעות פתיחה">תוכן</uib-tab> 
 
    <uib-tab index="1" heading="גיל ומשקל">תוכן</uib-tab> 
 
</uib-tabset>

nun stattdessen in die Bibliothek Code zu gehen und die Klasse zu entfernen, oder das Ändern der CSS mehrere Einstellungen außer Kraft zu setzen, wollte ich die Klasse mit jquery mit diesem Code entfernen: $("ul").removeClass("nav-tabs");

Das funktioniert gut, wenn ich es in der Konsole ausführen, nachdem die Seite geladen ist. Ich habe versucht, es in eine Funktion zu setzen und ng-init aufrufen, aber das hat nicht funktioniert. Ich versuchte, die ViewContentLoaded Veranstaltung wie diese verwendet:

$scope.$on('$viewContentLoaded', function() { 
    $("ul").removeClass("nav-tabs"); 
}); 

nicht so gut funktionieren. Ich weiß das Problem ist der Code läuft zu früh und nicht meine Angular-Konfiguration, weil die Funktion zu ng-click verbindet und klicken Sie nach dem Laden der Seite auch funktioniert gut.

Brennen Sie es in einer Direktive, nachdem das Element auch nicht funktioniert. Ich sehe den Code im Debugger jedes Mal ausgeführt, aber es tut nichts.

Zusammenfassend, wie kann der Code ausgeführt werden, nachdem die Seite vollständig Rendern beendet wurde?

aktualisieren

Ich löste es in der "richtigen" Art und Weise, durch eine Direktive. Immer noch nicht in der Lage, element aus irgendeinem Grund zu verwenden, nur jquery.

myapp.directive("removenavclass", function ($timeout) { 
 
    return { 
 
     link: function (scope, element, attrs) { 
 
      scope.$on('$viewContentLoaded', function() { 
 
       $timeout(function() { 
 
        $("ul").removeClass("nav-tabs"); //works 
 
        element.children().children()[0].removeClass("nav-tabs"); //sends an error to console saying "removeClass is not a function" 
 
        
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
});

Answer 1

haben Sie mit einem Timeout versucht?

$scope.$on('$viewContentLoaded', function() { 
     $timeout(function() { 
      $("ul").removeClass("nav-tabs"); 
     },0); 
}); 

aktualisieren

fand ich eine ähnliche Frage here