Question

我是使用角度材料的新手，我有一个关于放置sidenav模态的可能性的问题，

今天我尝试使用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

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

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

然后在你的模板中使用......如

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

Answer 2

抱歉迟到了......

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

}，300）;变成}，300）（）;

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

角度材料制作sidenav模态

2 个答案: