My website utilizes AngularJS templates, specifically a Single Page Application (SPA). Within one of the templates, I am utilizing a tab control from the AngularUI library named Ui-Tabset.
During the rendering process, this control generates a ul element and applies a CSS class of nav-tabs to it. This clashes with several of my existing CSS styles, resulting in an unappealing appearance.
<uib-tabset active="activeJustified" justified="true" id="tabs">
<uib-tab class="hvr-underline-from-center" index="0" heading="שעות פתיחה">Content</uib-tab>
<uib-tab index="1" heading="גיל ומשקל">Content</uib-tab>
</uib-tabset>Instead of modifying the library code or adjusting multiple CSS settings to override the conflict, my goal was to remove the class using jQuery through the following code snippet: $("ul").removeClass("nav-tabs");
While this approach works perfectly when executed in the Console after the page has loaded, my attempts to integrate it within a function linked to ng-init were unsuccessful. Similarly, using the $viewContentLoaded event like this:
$scope.$on('$viewContentLoaded', function () {
$("ul").removeClass("nav-tabs");
});
proved ineffective as well. The issue seems to stem from the code executing prematurely rather than any misconfiguration on the Angular side, as associating the function with ng-click and triggering it post-page load produces the desired result.
Even attempting to fire the directive containing the code after the respective element is rendered did not yield success. While the debugger confirms the code's execution, it fails to produce any visible changes.
In summary, how can the code be triggered once the page finishes rendering entirely?
Update
I addressed the issue using a more "appropriate" method, leveraging a directive. However, I encountered difficulty utilizing element within the directive, resorting solely to 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"); //triggers a console error stating that "removeClass is not a function"
});
});
}
};
});