Plunker Demo

Question

我正在开发基于Angularjs和Angular-Material的移动设备，但我对如何设置菜单感到有些困惑。

这是我的简化情况：

我的body内有我的md-sidenav和md-content，我的md-sidenav内有md-menu-buttons。

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

例如，当我点击时，＆＃39; home＆＃39;出现所有家庭用品的div等等？

Answer 1

您可能会考虑将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）。

Answer 2

这是一个简单的例子 - 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;
    };
});

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

2 个答案:

HTML

JS

Plunker Demo

注意