html - ng-map 尊重 ng-material 布局

Question

我正在尝试使用具有两列的angular material desgin 创建布局:

<div layout="row">
  <div flex="33">
    123
  </div>
  <div flex="77">
    456
  </div>
</div>

没关系。但是如果我放置一个 ng-map 元素:

<div layout="row">
  <div flex="33">
    123
  </div>
  <div flex="77">
    <ng-map ></ng-map>
  </div>
</div>

呈现为垂直堆叠。为什么？

演示:https://plnkr.co/edit/mNdHAwGXC0vLE7Erttib?p=preview

Answer 1

调查 console ，您可以看到以下错误:

TypeError: $element.bind is not a function at new __MapController (ng-map.js:318)

flex属性正在应用样式如下的 CSS 类:

./angular-material.min.css

.layout-row>.flex-66 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 66.66%;
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box
}

然后是一些其他样式，但那些是负责 flexgrid 的。如果您在 <ng-map> 上手动应用样式的 parent ，他们确实工作。

在 <ng-map> 中提到的错误足够快地在某个时刻停止脚本执行以不应用预期的 .flex-*包装上的类形式 ./angular-material.min.css <div> .

考虑 opening new issue (我查了他们，现在没有关于此事的) 或者只是使用不同的 map 插件。