javascript - 如何在 Angular Controller js中隐藏ng-controller之外的元素？

Question

我有这段代码显示 ng-controller 之外的内容。

HTML

<div class="btn-group companyName">
    <!-- buttons -->
</div>

<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
    <div class="faq-breadcrumbs">
        <!-- contents -->
    </div>
</div>

JS

angular.module('sample').controller('TopicsCtrl', function ($scope) {
    //how to hide first div?
};

顶部 div 位于网站标题内，因此它会显示在网站的所有页面中。仅当我位于常见问题解答页面时，才会显示第二个 div。现在，每当我进入常见问题解答页面时，我都不希望第一个 div 显示在标题上。如何才能做到这一点？谁能帮我？非常感谢。

Answer 1

执行此操作的 Angular 方法是创建一个指令来操作 DOM，并在路由位于 FAQ 页面上时隐藏页面上的元素。为此，您必须扩大应用程序的范围以包含 header 。

如果您做不到这一点，我建议您采用 javascript/jquery 方式，并在位置位于常见问题解答时隐藏 companyName div。像这样的东西可能会起作用。

$(document).ready(function() {
    if(location.pathname == 'faq'){
        $('.companyName').css('display', 'none');
    }
}

此解决方案确实会带来在文档完全加载之前可能显示信息的问题。