角材料使sidenav模态

Question

我是新来的使用有角材料的人，我对放置sidenav modal的可能性有疑问，

今天我尝试使用sidenav，它工作得很好，但我需要另一个选项，我想禁止使用键盘上的“esc”或点击sidenav来关闭这个sidenav。

这是默认情况下使用 sidenav 的示例。 CODEPEN EXAMPLE

//Javascript : from codepen
angular.module('MyApp').controller('AppCtrl', function ($scope,$timeout, $mdSidenav, $mdUtil, $log) {    
$scope.toggleRight = buildToggler('right');

/**
 * Build handler to open/close a SideNav; when animation finishes
 * report completion in console
 */
function buildToggler(navID) {      
  var debounceFn =  $mdUtil.debounce(function(){
        $mdSidenav(navID)
          .toggle()
          .then(function () {
            $log.debug("toggle " + navID + " is done");
          });
      },300);
  return debounceFn;
}})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
backdrop : 'static',
$scope.close = function () {
  $mdSidenav('right').close()
    .then(function () {
      $log.debug("close RIGHT is done");
    });
};
});

我找到了“backdrop:static”和“keyboard:false”选项，但它不起作用。或者我不知道该怎么做。

如果有人知道解决方案，那就太酷了！

Answer 1

抱歉这么晚才回复...

我只是忘记了最后一行代码中的两个大括号：

},300);变成},300)();

function buildToggler(navID) {      
    var debounceFn =  $mdUtil.debounce(function(){
    $mdSidenav(navID)
    .toggle()
    .then(function () {
        $scope.isLockedOpen = true;
    });
},300)();

Answer 2

可以在 sidenav 打开后设置 md-is-locked-open 属性。例如。在事件处理程序中使用范围标志：

function buildToggler(navID) {      
  var debounceFn =  $mdUtil.debounce(function(){
    $mdSidenav(navID)
      .toggle()
      .then(function () {
        $scope.isLockedOpen = true;
      });
  },300);
...

然后在你的模板中使用 sth like

<md-sidenav class="md-sidenav-right" md-component-id="right" md-is-locked-open="isLockedOpen">