TomerAgmon1 TomerAgmon1 - 1 year ago 71
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

element and adds a
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>

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:

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

$scope.$on('$viewContentLoaded', function () {

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


I solved it in the "correct" way, by using a directive. Still unable to use
for some reason, only

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 Source

did you tried with a timeout?

$scope.$on('$viewContentLoaded', function () {
      $timeout(function() {


I found a similar question here