0

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"
                    
                });
            });
        }
    };
});
TomerAgmon1
  • 295
  • 3
  • 10
  • 2
    Try to avoid jQuery when using AngularJS if possible. `angular.element` already supports `removeClass()` and `addClass()`. – Stack Jun 03 '16 at 14:50
  • I tried using your method by putting the code in a directive and using `element` like this: `element.children().children()[0].removeClass("nav-tabs");` I get an error in the console `element.children(...).children(...)[0].removeClass is not a function`. I debugged the code and the directive works fine and if I put a watch, `element.children()...` is exactly what i need. – TomerAgmon1 Jun 04 '16 at 16:00
  • As soon as you access the element reference ([0]) instead of the angular.element reference (what is returned by a call like children()), the removeClass method is no longer available. – Patrick Jun 04 '16 at 16:12
  • Also, if you are already loading jquery in your app, why wouldn't you do element.find(".nav-tabs").removeClass("nav-tabs") -- This should work if jquery is loaded before angular. – Patrick Jun 04 '16 at 16:14

1 Answers1

1

did you tried with a timeout?

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

Update

I found a similar question here

Community
  • 1
  • 1
Dlanor
  • 266
  • 2
  • 13