html - 为什么我的 Material AngularJS (CSS) 无法像所提供的演示那样工作？

Question

我是 AngularJS 世界的新手。但是，我希望实现 material design version of AngularJS用于创建表单。

所以我按照入门说明尝试做一些事情，但它看起来不像网站上的那个。所以，我复制了一个 basic demo from Codepen

我想我已经添加了所有必要的文件。 但我仍然无法在 Codepen 上让它看起来像那样。 我很确定它存在一些 CSS 问题，但我无法对此置之不理。

以下是我的代码:

angular
  .module('MyApp')
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      email: 'ipsum@lorem.com',
      firstName: '',
      lastName: '',
      company: 'Google',
      address: '1600 Amphitheatre Pkwy',
      city: 'Mountain View',
      state: 'CA',
      biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
      postalCode: '94043'
    };
  })
  .config(function($mdThemingProvider) {

    // Configure a dark theme with primary foreground yellow

    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();

  });

<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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-route.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/angularjs/1.3.15/angular-messages.min.js"></script>


<script src="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.js"></script>

<div ng-controller="DemoCtrl" layout="column" class="inputdemoBasicUsage" ng-app="MyApp">

  <md-content md-theme="docs-dark" layout-padding="" layout="row" layout-sm="column">
    <md-input-container>
      <label>Title</label>
      <input ng-model="user.title">
    </md-input-container>
    <md-input-container>
      <label>Email</label>
      <input ng-model="user.email" type="email">
    </md-input-container>
  </md-content>

  <md-content layout-padding="">
    <form name="userForm">

      <div layout="" layout-sm="column">
        <md-input-container style="width:80%">
          <label>Company (Disabled)</label>
          <input ng-model="user.company" disabled="">
        </md-input-container>

        <md-input-container flex="">
          <label>Submission Date</label>
          <input type="date" ng-model="user.submissionDate">
        </md-input-container>
      </div>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>First name</label>
          <input ng-model="user.firstName">
        </md-input-container>
        <md-input-container flex="">
          <label>Last Name</label>
          <input ng-model="theMax">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Address</label>
        <input ng-model="user.address">
      </md-input-container>
      <md-input-container md-no-float="">
        <input ng-model="user.address2" placeholder="Address 2">
      </md-input-container>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>City</label>
          <input ng-model="user.city">
        </md-input-container>
        <md-input-container flex="">
          <label>State</label>
          <input ng-model="user.state">
        </md-input-container>
        <md-input-container flex="">
          <label>Postal Code</label>
          <input ng-model="user.postalCode">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Biography</label>
        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
      </md-input-container>


    </form>
  </md-content>

</div>

感谢任何帮助。谢谢!

Answer 1

您需要将依赖项注入(inject)您的应用程序，例如 .module('MyApp', ['ngMaterial'])，并确保 ngMaterial 的 js 已加载到您的 index.html 中。只需在代码笔中重写“.module('MyApp', ['ngMaterial'])”似乎就可以了