Question

我有一个包含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"
                    
                });
            });
        }
    };
});

Answer 1

你试过超时吗？

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

<强>更新

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

无法在AngularJs模板

1 个答案: