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

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 解决方案..我只需要一个 Angular 纯 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

理想情况下，您将使用 Controller 变量(controllerAs 语法中的 ctrl.hideWhole)，以便您可以从应用中的其他位置更新元素的显示。