sidenav 切换时更改按钮主题（角度材料）答案

【问题标题】：Change button's theme when sidenav toggles (angular-material)sidenav 切换时更改按钮主题（角度材料）
【发布时间】：2014-12-17 22:53:59
【问题描述】：

我正在使用 angular-material 制作网站。有一个sidenav和一个按钮。每当 sidenav 切换时，我希望按钮更改它的主题。比如，当 sidenav 打开时，按钮的 md-theme 属性设置为“青色”，当 sidenav 关闭时，按钮设置为另一个主题。

我的html代码：

<div ng-app="app" ng-controller="navCtrl" layout="column">
  <section layout="row" flex>
    <md-content flex class="md-padding">
      <div layout="column" layout-fill layout-align="center center">
        <md-button class="md-fab md-primary" md-theme="cyan" ng-click="toggle()" aria-lebel="Navicon">
          <md-icon class=""></md-icon>
        </md-button>
      </div>
    </md-content>

    <md-sidenav class="md-sidenav-left" md-component-id="nav"></md-sidenav>
  </section>
</div>

还有我的控制器：

angular.module('app', ['ngMaterial'])

.controller('navCtrl', function($scope, $timeout, $mdSidenav) {
  $scope.toggle = function() {
    $mdSidenav('nav').toggle();
  };
});

我找不到聆听此切换和更改主题的方法。

【问题讨论】：

标签： javascript angularjs material-design

【解决方案1】：

该指令支持一个 md-is-open 属性，该属性标识一个 $scope 或控制器属性值，该属性值在 sidenav 状态更改时更新（ open closed ）。

然后，$mdSidenav('nav').toggle() 函数返回一个承诺，因此定义 'then' 以在您的控制器中设置一个 'theme' 属性，该属性从您身边的 md-theme 引用-导航标记：

<md-button class="md-fab md-primary" 
           ng-click="toggle()" aria-label="Navicon"
           md-theme="buttonTheme" >

...

<md-sidenav class="md-sidenav-left" md-component-id="nav"
            md-is-open="isOpen"></md-sidenav>

...

 angular.module('app', ['ngMaterial'])
.controller('navCtrl', function($scope, $timeout, $mdSidenav) {
    $scope.isOpen = false;
    $scope.buttonTheme = 'cyan';

    $scope.toggle = function() {
     $mdSidenav('nav').toggle().then( function() {
         $scope.buttonTheme = ($scope.isOpen ? 'indigo' : 'cyan');
     });
  };
});

【讨论】：