ngMaterial flex布局不起作用

Question

我似乎无法让 ngMaterial 成为一个简单的 hello world 应用程序的连续布局。我在控制台中没有看到任何错误，我做错了什么很明显吗？我希望下面的布局 blah, blag 水平。

<!DOCTYPE html>
<html>
  <head>
      <!-- AngularJS-ngMaterial-->
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.css' />
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css' />
      <!-- /AngularJS-ngMaterial-->
  
  </head>
  <body ng-app='myApp' layout='column'>
      <md-toolbar>
        <h1>Angular Material - Starter</h1>
      </md-toolbar>
      
      <div layout='row'>
        <div flex>
          blag
        </div>
        <div flex>
          blah
        </div>
      </div>
  
      <!-- AngularJS-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js'></script>
      <!-- /AngularJS-->
  
      <!-- AngularJS-ngAria-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-aria.js'></script>
      <!-- /AngularJS-ngAria-->
  
      <!-- AngularJS-ngAnimate-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.js'></script>
      <!-- /AngularJS-ngAnimate-->
  
      <!-- AngularJS-ngMaterial-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.js'></script>
      <!-- /AngularJS-ngMaterial-->
  
      <script type='text/javascript'>
          angular.module('myApp', ['ngMaterial']);
      </script>
  </body>
</html>

Answer 1

如果你运行调试控制台window你会看到这个错误：Uncaught ReferenceError: angular is not defined

所以我假设您的导入有问题。

我将你的 angular.module 语句提取到一个外部 app.js 文件中（不需要，但只是为了避免混淆）并且还用 angulars 网站上的一个替换了 css。这是一个工作示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-app='myApp' layout='column'>
  <md-toolbar>
    <h1>Angular Material - Starter</h1>
  </md-toolbar>

  <div layout='row'>
    <div flex>
      blag
    </div>
    <div flex>
      blah
    </div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="app.js"></script>

</html>

我使用的CDN来自：https://github.com/angular/material#cdn

ngMaterial flex布局不起作用

ngMaterial flex layout not working

javascript

flexbox

angularjs