Question

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

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

Answer 1

该指令支持md-is-open属性，该属性标识在更改sidenav状态（打开＆lt; - ＆gt; closed）时更新的$ scope或controller属性值。

然后，$ mdSidenav（'nav'）。toggle（）函数返回一个promise，所以定义'then'在你的控制器中设置一个'theme'属性，该属性是从你身边的md-theme引用的 - nav标记：

<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');
     });
  };
});

sidenav toggle（angular-material）时更改按钮的主题

1 个答案: