CODEWITHSUNDEEP
htmlangularjsangular-material
Biswajit
Biswajit

Reputation: 159

Sidebar toggle not working in angular material

I wanted to build a simple template like Youtube with angular material. But I am kinda stuck with a sidebar navigation issue. The following should be possible in the template 1. The sidebar should be opened on load (depending on the size of the screen) 2. If the browser is resized, the sidebar should autohide/show 3. If the menu button on the top-left is clicked, the sidebar should toggle as a part of the page (and not an overlay). It can be an overlay only when the screensize is small enough.

The menu button in the navigation bar and the sidebar are in different controllers. So I have written a factory to share the click event and its outcome

The html code for the html is as below

<html>

  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
    <style>
      .add-vertical-shadow{
        -webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
      }

    </style>

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
    <!-- User js files here -->
    <script src="main.js"></script>

    <script>

    </script>
  </head>

<body ng-app="mainApp" layout="column">
  <div ng-cloak="" class="toolbardemoBasicUsage" layout="column">

    <md-toolbar class="md-hue-2 add-vertical-shadow" ng-controller="navCtrl">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="menu" ng-click="toggleClicked()">
          <md-icon aria-label="Menu" class="material-icons">menu</md-icon>
        </md-button>

        <h2 flex="" md-truncate="">MyApp</h2>

        <md-button class="md-icon-button" aria-label="more_vert">
          <md-icon aria-label="more_vert" class="material-icons">more_vert</md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <!-- this will contain the main body and the sidebar -->
    <md-content flex >
      <div layout="vertical" ng-controller="sidebarCtrl" layout-fill>

        <!-- Sidebar start -->
        <md-sidenav class="md-sidenav-left md-whiteframe-4dp" md-component-id="leftSideBar" md-is-locked-open="{{hide}}">
          <form>
            <md-input-container>
              <label for="testInput">Test input</label>
              <input id="testInput" type="text" ng-model="data" />
            </md-input-container>
          </form>
        </md-sidenav>
        <!-- Sidebar end -->

        <!-- Main Body start -->
        <md-content flex layout-padding>
          Main body
        </md-content>
        <!-- Main Body end -->
      </div>
    </md-content>

  </div>

</body>

</html>

and the js file 

var mainApp = angular.module('mainApp',['ngMaterial']);

mainApp.factory('toggleSidebar', function($mdSidenav, $mdMedia){
  return {
    hide : $mdMedia('gt-xs'),
    toggle : function(sidebarElement){
      $mdSidenav(sidebarElement).toggle();
      this.hide = !this.hide;
    }
  };
});


mainApp.controller('navCtrl', function($scope, toggleSidebar) {
  $scope.toggleClicked = function(){
    toggleSidebar.toggle('leftSideBar');
    console.log('hide : ' + toggleSidebar.hide);
  }
});

mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
  $scope.hide = toggleSidebar.hide;
});

Any help is greatly appreciated.

Upvotes: 0

Views: 1972

Answers (1)

Biswajit
Biswajit

Reputation: 159

The problem was, "Any changes in the service parameter wasn't reflecting sidebarCtrl controller." I can't pinpoint the reason, but the bonding somehow wasn't 2-way, although I expected it to be The below code helped

mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
  $scope.hide = function(){
    return toggleSidebar.hide;
  };
});

Upvotes: 0

Related Questions