Angular Material Design：$mdMedia('gt-md') 在 html 中不起作用答案

【问题标题】：Angular Material Design: $mdMedia('gt-md') not working in htmlAngular Material Design：$mdMedia('gt-md') 在 html 中不起作用
【发布时间】：2015-04-16 08:35:12
【问题描述】：

我一直在用 AngularJS 编写一个项目来开始学习框架，目前我正在使用 angular-material 库，我正在尝试实现一个类似于他们的演示的 sidenav：https://material.angularjs.org/#/demo/material.components.sidenav

不幸的是，下面 html 中的 $mdMedia('gt-md') 调用总是返回 false（我在笔记本电脑屏幕上打开它，所以它应该是 true）但是如果我从 $mdMedia(' gt-md') 在相关的角度控制器中返回 true。

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

谁能解释我为什么会看到这种行为？我已经为此苦苦挣扎了好几天了。

【问题讨论】：

我认为你的笔记本电脑有一个大屏幕，所以它不会触发 $mdMedia('gt-md')，当你使用 chrome 调试器或其他东西调试它时，宽度您的屏幕缩小了，此方法返回 true。您可以尝试手动减小浏览器的大小，而不是在全屏模式下运行
笔记本电脑有一个标准的 15 英寸屏幕，所以我不认为是这样，这也不能解释为什么我在 javascript 中进行相同的调用时收到 true，但如果我在html?
用这么少的信息不可能回答这个问题，但在 GitHub 上有一个惊人相似的issue 回答。
哈，我实际上只是在 Github 上查看完全相同的问题！我没有将服务添加到 $rootScope，所以稍后会尝试并报告。感谢您的帮助！

标签： javascript angularjs angular-material

【解决方案1】：

查看@ExpertSystem 发布的链接后，将 $mdMedia 服务添加到 $rootscope 后，我可以直接从我的 HTML 代码中使用 $mdMedia。

之所以出现问题，是因为 $mdMedia 是一项服务，除非它在范围内可用，否则它对视图不可用。

感谢大家的帮助！！

【讨论】：

请记住sidenav 的md-is-locked-open 是一种特殊情况，因为ngMaterial 本身使$mdMedia 可用于md-is-locked-open 中的表达式。但是如果你想在其他地方使用它，你需要让它在范围上可用。当然，对于预定义的常量（sm、md、lg），您可以使用hide/show-[gt-]-xx 属性。
我没有很快得到它。对于谁也没有：您基本上将 $rootScope 和 $mdMedia 服务注入到您的控制器中（在某种程度上，它必须在将使用 $mdMedia 的元素的父级中）。然后，在控制器内部，创建$rootScope.$mdMedia = $mdMedia。这将允许您在 HTML 中单独使用 $mdMedia。

【解决方案2】：

如果您在您的项目中使用“angular-material”：“0.8.1”或更低版本。把上面的代码改成这个

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

【讨论】：

使用 0.8.2 所以不幸的是不是这个，我认为这可能是因为我没有将服务添加到 $rootScope 中，正如前面 @ExpertSystem 链接的 Github 问题中提到的那样。当我有机会尝试修复时，我会报告。
这实际上解决了我的问题；谢谢.. 现在升级到最新的材料版本