2016-09-14 3 views
0

Я хочу, чтобы отключить мой навигационный пункт, используя этот код:Отключить элемент навигации

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

Однако, это не работает. Поиск документов, но ничего не нашел. Как отключить элемент навигации правильно?

+0

Вот документ: https://docs.angularjs.org/api/ng/directive/ngDisabled Конечно, 'ng-disabled' должен быть' true' для элемента, который должен быть отключен. Если вы установите его на 'false', как и вы, ничего не произойдет .... Кроме того, я не знаю, можете ли вы использовать это для элемента nav. Я думаю, что это только для элементов формы. Не уверен в этой мысли. –

+0

oops извините мою ошибку, это должно быть 'ng-disabled = true' и до сих пор не работает. – Rendy

ответ

0

Я пробовал, но не смог найти правильный путь, и не нужно было время отправить запрос на вытягивание/слияние (ЕСЛИ я мог бы исправить это). Я сумел получить работу вокруг работающих, которые в основном перехватывает и останавливает щелчок от распространяющейся до обрабатываться мб-нав-пункта:

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

Это будет перехватывать и либо блокировать или разрешить событие щелчка на пузырек до мда-нав-пункт. Не лучший способ использования ng-disabled - это SOOO намного проще +, я бы сэкономил несколько часов, но теперь он работает. Это будет завинчивать CSS-код немного, так что ниже моя «попытка» на то, чтобы вещи хорошо выглядеть в CSS (ну, СКС):

.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; 
    } 
} 
Смежные вопросы