侧边栏切换不适用于有角度的材料

Question

我想用 Angular 材质构建一个简单的模板，比如 Youtube。 但我有点陷入侧边栏导航问题。模板中应该有以下可能 1.侧边栏应在加载时打开（取决于屏幕大小） 2.如果浏览器调整大小，侧边栏应该自动隐藏/显示 3. 如果单击左上角的菜单按钮，侧边栏应作为页面的一部分切换（而不是覆盖）。只有在屏幕足够小的情况下才可以叠加。

导航栏和侧边栏中的菜单按钮在不同的控制器中。所以我写了一个工厂来分享点击事件及其结果

html的html代码如下

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

还有js文件

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;
});

非常感谢任何帮助。

Answer 1

问题是，“服务参数中的任何更改都没有反映 sidebarCtrl 控制器。” 我无法查明原因，但不知何故，粘合不是双向的，尽管我希望它是 下面的代码有帮助

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