CODEWITHSUNDEEP
javascriptangularjs
Coding Duchess
Coding Duchess

Reputation: 6919

How to hide header tag from angular controller

I am building an angular application with multiple controllers.

Here is my index page:

<body ng-controller="BaseCtrl">
    <div class="wrapper">
        <header ng-show="HdrSection.ShowMenu">
          <a ng-href="" class="show-list"><i class="fa fa-th-list">Option 1</i></a>
          <a ng-href="" class="show-list"><i class="fa fa-th-list">Option 2</i></a>
          <a ng-href="" class="show-list"><i class="fa fa-th-list">Option 3</i></a>
          <a ng-href="" class="show-list"><i class="fa fa-th-list">Option 4</i></a>


        </header>
        <div class="container" ui-view>

        </div>
    </div> <!--wrapper div end-->
</body>

The pages of the application get rendered inside the div container. The first one gets loaded is the login page. I want to hide the header when login page is loaded and only show it whenever the page that is not a login page gets loaded. What's the best way to do that? Should I hide it in the Login page controller?

Here is my login page:

<div id="login" class="main">
<div class="row">
    <div class="col-md-2">
        <img src="Images/Logo.gif" />
    </div>
</div>
<div class="row">
    <div class="col-md-10">
        <form id="frmLogin">
            <span class="prompt_text">Please enter your ID:</span>
            <div class="input-group" style="width: 50%;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input type="text" class="form-control" id="Username" ng-model="lc.user">
            </div>
            <br />

            <input type="button" class="btn_main" value="Login" ng-click="Login()">
            <br />
            <span id="lblMsg" class="error_msg">{{lc.UserValidate}}</span>
        </form>
    </div><!--/.span12-->
</div><!--/.row-fluid-->

and here is a base controller for my index page:

(function () {
var app=angular.module("myApp", ["ui.router"]);
app.controller("BaseCtrl", ["$scope", BaseControllerFunc]);

function BaseControllerFunc($scope) {
      //$('header').hide();
      console.log($scope.HdrSection.ShowMenu);
      $scope.HdrSection = { ShowMenu: false };
      $scope.HdrSection.ShowMenu = false;
      console.log($scope.HdrSection.ShowMenu);
   }

})();

So far I tried 2 things: using $('header').hide(); which works the first time page is opened but then I have no way to show the header again from any other child controller loaded by the page

and setting ng-show attribute of the header section to false in my base controller did not work as $scope.HdrSection.ShowMenu comes up as undefined

Can anyone help?

I load a number of different pages into the container div and each has its own controller. The only one I do not want header shown for is the login page

Upvotes: 0

Views: 1153

Answers (2)

Coding Duchess
Coding Duchess

Reputation: 6919

Got it to work by changing my controller code to:

(function () {
    var app=angular.module("myApp", ["ui.router"]);
    app.controller("BaseCtrl", ["$scope", BaseControllerFunc]);

    function BaseControllerFunc($scope) {
        $scope = { ShowMenu: false };
    }

})();

Now whenever the page loaded, the header is hidden and can be enabled by setting 

$scope.parent = { ShowMenu: true };

from all other controllers

Upvotes: 0

German Blanco
German Blanco

Reputation: 816

Try passing explicit the $scope form the controller injection as follow:

  app.controller("BaseCtrl", ["$scope", BaseControllerFunc($scope)]);

  function BaseControllerFunc($scope) { 
   ...
   }

})

Upvotes: 0

Related Questions