当sidenav切换时更改按钮的主题（角度材质）

debugcn 发表于 Dev

Halfo

我正在使用斜角材料制作网站。有一个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();
  };
});

我找不到一种方法来收听这种切换并更改主题。

肯德里克·伯森（Kendrick Burson）

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

然后，$ mdSidenav（'nav'）。toggle（）函数返回一个promise，因此定义“ then”以在控制器中设置一个“ theme”属性，该属性是从side-nav标记中的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');
     });
  };
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。