Соответствие ng-картам ng-материала

Я пытаюсь создать макет с помощью 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>

представлен вертикально. почему?

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

Ответ 1

При проверке элемента я думаю, что тэг ng-map автоматически загружает некоторый стиль из google apis, который переопределяет стиль flex/ angular.

Я написал решение здесь: https://plnkr.co/edit/GHYZoC5BotyD58RG0Qdj?p=preview

Я посмотрел макет документации Angular. Я думаю, что действительно нет хорошего способа переопределить стиль CSS ng-map, который автоматически загружается.

Итак, я решил просто использовать какой-то пользовательский CSS, который использует float для размещения двух элементов:

.first {
  height: 250px;
  width: 250px;
  position: relative;
  float: left;
}

.map {
  height: 250px;
  width: 250px;
  position: relative;
  float: right;
}

.container {
  width: 500px;
  margin-right: auto;
  margin-left: auto;
  height: auto;
}

HTML:

<body ng-controller="ctrl">
   <div class="container">
       <div class="first">Hello</div>
       <ng-map class="map"></ng-map>
   </div>
</body>

Ответ 2

Заглянув в console, вы можете увидеть следующую ошибку:

TypeError: $element.bind не является функцией 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>, они работают.

Упомянутая ошибка в <ng-map> прекращает выполнение сценариев в какой-то момент, чтобы не применять ожидаемую форму класса .flex-*./angular-material.min.css на обертке <div>.

Рассмотрим открытие новой проблемы (я их проверил, там нет ни одного вопроса) или просто используя другой плагин карты.

Ответ 3

Вы не включаете таблицу стилей загрузки

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <link rel="stylesheet" href="style.css" />

  <script src="//code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

  <script src="//maps.google.com/maps/api/js"></script>
  <script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="ctrl">

  <div layout="row" style="display: flex;">
    <div flex="33" style="width: 33%">
      123
    </div>
    <div flex="77" style="width: 77%">
      <ng-map ></ng-map>
    </div>
  </div>

</body>

</html>

Live https://plnkr.co/edit/lldddeNsw3LwhhXQkBv4?p=preview