TomerAgmon1 TomerAgmon1 - 6 months ago 31
jQuery Question

Unable to manipulate DOM in AngularJs template

I have a site with Angularjs templates, a SPA. In one of my templates i am using a tab control from the AngulrUI library called Ui-Tabset.

While the control is rendering, it creates a

ul
element and adds a
nav-tabs
CSS class to it. That conflicts with many CSS settings I have and makes it look ugly.



<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>





Now instead of going into the library code and removing the class, or changing the css to override several settings, I wanted to remove the class with jquery using this code:
$("ul").removeClass("nav-tabs");


This works great if i run it in the Console after the page is loaded.
I tried putting it in a function and calling
ng-init
but that did not work.
I tried using the ViewContentLoaded event like this:

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


Did not work as well. I know the problem is the code running too early and not my Angular configuration because linking the function to
ng-click
and clicking it after the page is loaded also works great.

Firing it inside a directive after the element also does not work. I see the code in the debugger running every time but it does nothing.

To sum up, how can the code run after the page has completely finished rendering?

Update

I solved it in the "correct" way, by using a directive. Still unable to use
element
for some reason, only
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

did you tried with a timeout?

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

Update

I found a similar question here