无法在 AngularJs 模板中操作 DOM答案

【问题标题】：Unable to manipulate DOM in AngularJs template无法在 AngularJs 模板中操作 DOM
【发布时间】：2016-06-03 14:40:52
【问题描述】：

我有一个带有 Angularjs 模板的网站，一个 SPA。在我的一个模板中，我使用了 AngulrUI 库中的一个选项卡控件，称为 Ui-Tabset。

当控件呈现时，它会创建一个ul 元素并向其添加一个nav-tabs CSS 类。这与我拥有的许多 CSS 设置相冲突，使它看起来很丑。

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

现在我不想进入库代码并删除类，或者更改 css 以覆盖多个设置，而是想使用以下代码删除带有 jquery 的类：$("ul").removeClass("nav-tabs");

如果我在页面加载后在控制台中运行它，这将非常有用。我尝试将它放在一个函数中并调用ng-init，但这不起作用。我尝试像这样使用 ViewContentLoaded 事件：

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

效果也不好。我知道问题在于代码运行得太早，而不是我的 Angular 配置，因为将函数链接到 ng-click 并在页面加载后单击它也很有效。

在元素之后的指令内触发它也不起作用。我看到调试器中的代码每次都在运行，但它什么也没做。

总结一下，页面完全渲染完成后，代码如何运行？

更新

我通过使用指令以“正确”的方式解决了它。由于某种原因仍然无法使用element，只能使用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"
                    
                });
            });
        }
    };
});

【问题讨论】：

尽可能在使用 AngularJS 时避免使用 jQuery。 angular.element 已经支持removeClass() 和addClass()。
我尝试使用您的方法，将代码放入指令中并使用element，如下所示：element.children().children()[0].removeClass("nav-tabs"); 我在控制台element.children(...).children(...)[0].removeClass is not a function 中出现错误。我调试了代码，指令工作正常，如果我放了手表，element.children()... 正是我需要的。
一旦您访问元素引用 ([0]) 而不是 angular.element 引用（由 children() 之类的调用返回的内容），removeClass 方法就不再可用。
另外，如果您已经在应用程序中加载 jquery，为什么不这样做 element.find(".nav-tabs").removeClass("nav-tabs") - 这应该如果在 angular 之前加载 jquery，则可以工作。

标签： javascript jquery html css angularjs

【解决方案1】：

您是否尝试过超时？

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

更新

我发现了一个类似的问题here

【讨论】：

我会看看它，如果这是答案，我会更新，谢谢！！
像魅力一样工作，非常感谢！不要忘记将 '$timeout' 与 '$scope' 一起注入到控制器函数中。