隐藏父div并在Angular Js中显示ui视图

Question

How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view

setting html page

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

I don't want a jquery solution.. all i need a angular of pure javascript solution

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

Ideally you'll use a controller variable ( ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.

Answer 2

Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.

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