angularjs - 基本 Angular Material 布局/flex 示例不起作用

Question

我尝试了 Angular 的 Material 设计演示站点中的基本布局/flex 示例:

https://material.angularjs.org/latest/layout/container

但无论我做什么，它都不会像解释的那样工作，只会以 100% 的宽度显示彼此下方的四个内部 div。我尝试修改代码，使列的宽度为 50%，但它仍然不起作用。这是我的代码:

<div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
</div>

<div layout="row">
    <div style="background-color: #eea236" flex="50">First item in row</div>
    <div style="background-color: #ce8483" flex="50">Second item in row</div>
</div>

这是输出:

有什么想法吗？

这是一个 jsfiddle:

https://jsfiddle.net/v42grc01/1/

Answer 1

您没有包含 Angular Material 的依赖项，也没有初始化应用和 Controller - 请参见下面的演示:

angular.module('app', ['ngMaterial']).controller('ctrl', function() {});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
  </div>

  <div layout="row">
    <div style="background-color: #eea236" flex='50'>First item in row</div>
    <div style="background-color: #ce8483" flex='50'>Second item in row</div>
  </div>
</div>