Question

我想使用以下代码禁用导航项：

md-nav-bar
    md-nav-item A
    md-nav-item(ng-disabled=false) B

但是，它不起作用。寻找文档，但无法找到任何东西。如何以正确的方式禁用导航项？

Answer 1

我尝试过但无法找到合适的方式，并且没有时间提交拉/合并请求（如果我可以修复它）。我确实设法得到了一个解决方法，它基本上拦截并阻止点击传播到由mb-nav-item处理：

<md-nav-item md-nav-click="AppCtrl.gotoPage(1)" name="page-1">
  <span ng-click="AppCtrl.gotoPageBlocker(1, $event)">Loan Details</span>
</md-nav-item>

然后在你的控制器/无论如何，只需定义gotoPageBlocker()就像这样：

function gotoPageBlocker(pageNo, theEvent) {
  if (!userCanAccessPage(pageNo)) {
    theEvent.preventDefault();
    theEvent.stopPropagation();
  }
}

这将拦截并阻止或允许click事件冒泡到md-nav-item。不是使用ng-disabled的最佳方式是SOOO更容易+会让我节省几个小时，但它现在可以工作。这会搞砸一下css，所以下面是我的尝试＆＃34;在css中使事情看起来很好（嗯，scss）：

.md-nav-item {

  /**
   * We need to move the margin and padding from the parent buttong to the child
   * span. This is so the span intercepts the click from the whole area
   */
  .md-button {
    margin: 0px !important;
    padding: 0px !important;

    ._md-nav-button-text span {
      line-height: 24px;
      margin: 0 4px;
      padding: 12px 16px;
      display: block;
      outline: none;
    }
  }

  /**
   * This targets the unselected disabled button
   */
  &[disabled] .md-button._md-nav-button.md-unselected {
    color: #ff0000;
    cursor: inherit;
  }
}

禁用导航项

1 个答案: