md-menus не закрывается при использовании ng-repeat

<md-menu-bar> 
    <md-menu ng-repeat="section in sections"> 
    <md-button class="navButton" ng-click="$mdOpenMenu()"> 
     {{section.name}} 
    </md-button> 
    <md-menu-content> 
     <md-menu-item> 
     <md-button>Subsection 1</md-button> 
     </md-menu-item> 
    </md-menu-content> 
    </md-menu> 
</md-menu-bar>

Я делаю что-то вроде выше, но, к сожалению, если я нажму на меню, он останется открытым, даже если я нажму другие кнопки.md-menus не закрывается при использовании ng-repeat

Я просто хочу, чтобы иметь такое же поведение, как

https://material.angularjs.org/latest/demo/menuBar

P.S. Если я не использую ng-repeat (это означает, что меню являются статическими), он работает нормально.

Problem Codepen

источник

2015-10-14 Incognito

Директива ng-repeat создает отдельный объем, поэтому (скорее всего) ваш пример работает. Одна из возможностей заключается в использовании синтаксиса controllerAs и назначении вашего метода на реальную область управляющего контроллера, а не на угловую $ область. Затем вы получите доступ к вашему методу, открыв новое меню в виде ctrlName.methodName(); Было бы проще, если бы вы создали скрипку –

Pankaj создал кодекс. Большое спасибо! @Maciej, см. Отредактированный вопрос. – Incognito

Я только что столкнулся с этим вопросом и заметил, что ссылка, опубликованная С. Клечковским, имеет обходное решение, сделанное christrude. Это не идеально (как указывали другие пользователи), но, по крайней мере, это работает. Мог бы также опубликовать его здесь.

Вы должны включить службу $mdMenu в свой контроллер и вызвать метод hide, когда вы нажмете, чтобы открыть меню.

$scope.closeOthers = function() { 
    $mdMenu.hide(null, { closeAll: true }); 
}

и в HTML

<button ng-click="closeOthers();$mdOpenMenu()">File</button>

Вот отредактированная Codepen. Я надеюсь, что это помогает.

EDIT

Лучшее решение заплат сам компонент. Даже с недостатками с обходным решением, найденным в Github (которое я воспроизвел здесь), он по-прежнему остается лучшим.

Однако это альтернатива только для целей разведки;) This little frankenstein использует обещания только открыть следующее меню, когда все анимации будут выполнены.

Markup

<button ng-click="closeOthers().then($mdOpenMenu);">File</button>

Контроллер

var lock = false; 

$scope.closeOthers = function() { 
    if(lock) { 
    return; 
    } 

    var defer = $q.defer() 
    lock = true; 

    $mdMenu.hide(null, { closeAll: true }).then(function() { 
    lock = false; 
    defer.resolve(); 
    }); 

    return defer.promise; 
}

источник

2015-10-23 08:19:47

К сожалению, это не полное рабочее решение, хотя в некоторых случаях оно достаточно хорошее. Проблема с этим решением заключается в том, что при повторном вызове menu1-> menu2-> menu1 'md-content' не будет отображаться, потому что, когда он открывается, он все еще попадает в' .hide() ' – Incognito

@ ReyLibutan Я сделал редактирование, но, по-прежнему считаю, что это лучшее, что вы получите, не исправляя компонент (либо ожидая официального исправления, либо запустив исправленный компонент, который может быть нежелательным для вас). –

Хороший вопрос! Кажется, что это известная ошибка, которая еще не исправлена. Я добавил комментарий к вашему примеру и некоторую разработку проблемы по существующим issue. Будем надеяться, что скоро это будет исправлено.

Комментарий:

Вот пример, который иллюстрирует Codepen заявленную проблему.

После некоторых исследований я заметил, что это происходит потому, что мкр-меню директива использовать $ объема. $ Испускают для запуска события $ mdMenuOpen на , которые слушают все экземпляры мкр-меню. $ emit запускает прослушиватели всех родительских областей, в том числе тех, на которых происходит событие. То, что означает, что все экземпляры md-меню находятся в одной области, все равно , но это не так, когда ng-repeat создает новую область для каждого ребенка.

источник

2015-10-19 23:19:54

Единственный надежный обходной путь я нашел

$scope.forceCloseMenu = function() { 
    $('.md-open-menu-container').hide(); 
    $('.md-menu-backdrop').remove(); 
    $('.md-scroll-mask').remove(); 
};

И называя forceCloseMenu() каждый раз, когда пункт меню ва s щелкнул.

Обратите внимание, что для этого также требуется jQuery.

источник

2016-05-23 08:57:30

md-menus не закрывается при использовании ng-repeat

ответ

Смежные вопросы