Angular-material 如何构建控制 md-content 的 sidenav 菜单？

Question

我正在开发基于 Angularjs 和 Angular-Material 的手机，但我对如何设置菜单有点困惑。

这是我的简化情况：

在我的 body 里面有我的 md-sidenav 和一个 md-content，在我的 md-sidenav 里面有所有的 md-menu-buttons.

问题：我如何实现这些 md-menu-buttons 以便单击它们时，md-content 中显示不同的内容。

例如，当我点击时，'home' 会出现一个 div 以及所有家里的东西等等？

Answer 1

这是一个简单的例子 - CodePen

标记

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
  <section layout="row" flex="">
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4" id="leftSideNav" md-disable-backdrop="true">
      <md-toolbar class="md-theme-indigo" layout="row">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
        <span flex></span>
        <md-button ng-click="close()">Close</md-button>
      </md-toolbar>
      <md-content layout-padding="" layout="column" layout-align="start start">
        <md-button ng-click="show('home')" class="md-primary">Show Home</md-button>
        <md-button ng-click="show('work')" class="md-primary">Show Work</md-button>
      </md-content>
    </md-sidenav>

    <md-content flex="" layout-padding="" layout="column" layout-align="top center">
      <md-button ng-click="toggleLeft()" class="md-primary">
        Toggle left
      </md-button>
      <div ng-switch="toShow">
        <div ng-switch-when="home">
          Home!
        </div>
        <div ng-switch-when="work">
          Work!
        </div>
      </div>
    </md-content>
  </section>
</div>

JS

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function ($scope, $mdSidenav) {
   $scope.toShow = "home"; // Default

    $scope.toggleLeft = function() {
        $mdSidenav("left")
          .toggle();
    };

    $scope.close = function () {
      $mdSidenav('left').close();
    };

    $scope.show = function (toShow) {
      $scope.toShow = toShow;
    };
});

Answer 2

您可能在使用 AngularJS 时考虑了 SPA（ 单页应用程序 ）概念，那么为什么不尝试使用 AngularJS 路由模块 - 专为此类目的而构建。

AngularJS有两个流行的路由模块，即：

为了简单起见，你可以选择第一个。

以下是设置路线以在导航到特定路线时在 ngView 指令中显示不同模板的方法：

HTML

<!-- Your md-buttons -->
<a md-button href="#dashboard">Dashboard</a>
<a md-button href="#some-other-route">Some other route</a>
<!-- ... -->
<md-content>
    <div ng-view></div> <!-- This is where your templates (and their controllers) are injected -->
</md-content>

JS

angular.module('yourApp', [
    'ngRoute', 
    // other dependencies
])

.config(function($routeProvider){
    /* 
    * set up your routes here
    */
    $routeProvider.
    when('/dashboard', {
        template: '...'  // alernatively, `templateUrl` if your partial stays somewhere else,
        controller: function (){ 
           /* custom logic for the template */ 
        }
    })
    .when('/some-other-route', {
        template: '...',
        controller: function(){ ... }
    });
})

Plunker Demo

注意： 如果在 Plunker 演示中尚未打开，请不要忘记从左上角打开侧边导航。

备注

在 HTML.

中加载 angularJS 后，不要忘记在某处加载 ngRoute 的脚本

您还可以查看 $locationProvider 服务的 html5Mode 方法，用于配置链接中路由的工作方式（例如 /dashboard 而不是 #dashboard）。

Angular-material 如何构建控制 md-content 的 sidenav 菜单？

Angular-material how to build a sidenav menu that control a md-content?

html

javascript

angularjs

angular-material

HTML

JS

Plunker Demo

备注