Question

点击#clickit时如何隐藏div“整体”，这样我的设置页面内容就不会显示，而.user页面会在ui-view中显示

设置html页面

 <!-- page content -->
       <div class="whole">
            <div class="page-title">
              <div class="title_left">
                <h3>Settings</h3>
              </div>

            <div class="clearfix"></div>
            <div class="row" id="clickit"> // <-- Click to hide "whole" class
              <div class="col-md-12 col-sm-12 col-xs-12">
                <a ui-sref=".user">Users & practitioners</a>
                </div>
              </div>
            </div>
            </div>

         <div  ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
        </div>
        <!-- /page content -->

我不想要一个jquery解决方案..所有我需要一个纯粹的javascript解决方案

Answer 1

<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
    <div class="page-title">
        <div class="title_left">
            <h3>Settings</h3>
        </div>

        <div class="clearfix"></div>
        <div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var

理想情况下，您将在controllerAs语法中使用控制器变量（ctrl.hideWhole），以便您可以从应用程序的其他位置更新元素的显示。

Answer 2

这是一个针对您的问题的JavaScript解决方案，将一个函数附加到元素的onclick事件，该事件将css display属性设置为none。

<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
    var wholeDiv = document.getElementsByClassName(".whole");
    wholeDiv.style.display = 'none'; 
}

隐藏父div并在Angular Js中显示ui-view

2 个答案: