是否可以在 md-sidenav 中使用 md-component-id 中的绑定？

Question

我在指令中使用 md-sidenav。我希望这是一个可重复使用的组件，并且两侧各有一个。我在指令中有一个关闭和打开按钮：

$mdSidenav($scope.header).close()
$mdSidenav($scope.header).open()

如果我随后在 sidenav 中对 md-component-id 名称进行硬编码，使其匹配 $scope.header:

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="Tasks">

然后上面的工作，但我希望它是灵活的：

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="{{header}}">

但这行不通。也许这是 angular material 支持此功能的功能请求？这个问题有任何简单的解决方法吗？

Answer 1

这似乎工作正常。 Example（使用 Angular 1.4，angular-material 0.8.3）

HTML:

<body ng-controller="AppController" ng-init="init()">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="{{header}}">
  <h2>
    <span>Value of $scope.header: </span>
    <span ng-bind="header"></span>
  </h2>
  <h2>
    <span>Value of md-component-id on sidenav: </span>
    <span ng-bind="md_component_id"></span>
  </h2>
</md-sidenav>

控制器：

angular.module 'App'
  .controller 'AppController', ($scope, $timeout) ->
    $scope.header = 'test'

    $scope.init = ->
      $timeout ->
        $scope.md_component_id = angular.element('md-sidenav').attr('md-component-id')
      , 500

是否可以在 md-sidenav 中使用 md-component-id 中的绑定？

Is it possible to use a binding in md-component-id in md-sidenav?

angularjs

angular-material