2015-04-16 1 views
3

Я кодировал проект в AngularJS, чтобы начать изучать структуру, в настоящее время я использую библиотеку углового материала, и я пытаюсь для реализации sidenav, похожего на их демо: https://material.angularjs.org/#/demo/material.components.sidenav

К сожалению, вызов $ mdMedia ('gt-md') в html ниже всегда возвращает false (я открываю его на экране ноутбука, поэтому он должен быть правдой), но если я зарегистрирую возврат из $ mdMedia ('gt-md') в соответствующем угловом контроллере, он вернет true.

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"> 

Может ли кто-нибудь пролить свет на то, почему я вижу это поведение? Я боролся с ним уже несколько дней.

+2

Я думаю, что ваш ноутбук имеет большой экран, поэтому он не запускает $ mdMedia ('gt-md'), и когда вы отлаживаете его, используя что-то вроде хром-отладчика или что-то еще, ширина экрана уменьшается и этот метод возвращает true. Вы можете попытаться уменьшить размер своего браузера вручную, а не запускать его в полноэкранном режиме. – Tony

+0

Ноутбук имеет стандартный 15-дюймовый экран, поэтому я не думаю, что это так, и это не объясняет, почему я получаю истинное значение, когда я делаю тот же вызов в javascript, но false, если я сделаю это в html? – mallen

+1

Невозможно ответить на это с такой маленькой информацией, но есть поразительно похожие [вопрос] (https://github.com/angular/material/issues/2341), который ответил на GitHub. – gkalpak

ответ

4

Посмотрев на ссылку разместил @ExpertSystem добавив услугу $ mdMedia в $ rootscope позволило мне использовать $ mdMedia непосредственно из моего HTML кода.

Проблема возникла из-за того, что поскольку $ mdMedia является сервисом, она недоступна для представления, если она не доступна в области видимости.

Спасибо всем за помощь!

+2

Имейте в виду, что 'sidenav'' md-is-locked-open' является особым случаем, потому что 'ngMaterial' сам делает' $ mdMedia' доступным для выражения в ' мкр-это автоподстройки open'. Но если вы хотите использовать его еще там, вам нужно сделать его доступным в области. И, конечно, для предопределенных констант (sm, md, lg) вы можете использовать атрибуты 'hide/show- [gt -] - xx'. – gkalpak

+1

Я не понял это быстро. Для тех, у кого также нет: В основном вы вводите службу $ rootScope и $ mdMedia в свой контроллер (который должен быть каким-то образом, родителем элемента, который будет использовать $ mdMedia). Затем внутри контроллера создайте '$ rootScope. $ MdMedia = $ mdMedia'. Это позволит вам использовать только $ mdMedia в своем HTML. –

2

Если вы используете «угловой материал»: «0.8.1» или ниже в летнем проекте. Изменение кода выше в этом

<md-sidenav 
    class="md-sidenav-left md-whiteframe-z2" 
    md-component-id="left" 
    md-is-locked-open="$media('gt-md')"> 
+0

Использование 0.8.2, к сожалению, это не так, я думаю, это может быть потому, что я не добавил службу в $ rootScope, как упоминалось в этой проблеме Github, связанной ранее с помощью @ExpertSystem. Я отчитаю, когда у меня появится шанс исправить это. – mallen

+1

сделать пруд ур код – nitin

+0

Ну, это действительно решило мою проблему; спасибо .. теперь обновить до новейшей версии материала – sjobe

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