Question

我想用角度材料构建一个像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

问题是，＆＃34;服务参数的任何变化都不反映sidebarCtrl控制器。＆＃34; 我无法确定原因，但这种联系不是双向的，尽管我预计它会是以下代码帮助

System.setProperty("webdriver.gecko.driver","G:\\Selenium\\Firefox driver\\geckodriver.exe");//set path as per location of your geckodriver

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

1 个答案: