Question

这个我的代码....在这个材料css中没有应用于输入字段，它们显示为普通的html输入。

我使用了材质css和js cdns，它们都是相同的版本。我不知道为什么它不起作用。我检查了stackoverflow中的其他帖子，但我没有得到解决方案。所以，有人请帮帮我...

var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {

});

.header {
            text-align: center;
            height: 80px;
            margin-left: 555px !important;
            line-height: 80px;
            color:white;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: Verdana,sans-serif;
            font-size: 12px;
            color: #111;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
            background-size: cover;
        }

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login to Data Portal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
    <div ng-app="sdp" ng-controller="MyCtrl">
        <md-toolbar style="background: #174a7a;">
            <div class="md-toolbar-tools">
                <h1 class="header">LOGIN</h1>
            </div>
        </md-toolbar>
    </div>
    <div>
        <md-card >
            <md-card-content>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card</span>
                    </md-card-title-text>
                </md-card-title>
                <ng-form name="colorForm">
                    <div layout-gt-xs="row">
                        <md-input-container>
                            <label> Username </label>
                            <input ng-model="un" required>
                        </md-input-container>
                        
                         <md-input-container>
                            <label> Password </label>
                            <input ng-model="pswd" required>
                        </md-input-container>
                    </div>
                </ng-form>
            </md-card-content>
        </md-card>
    </div>
</body>
</html>

Answer 1

您已将ng-app放置在工具栏div上，因此您的AngularJS应用仅适用于该部分内容。

从那里删除它并将其添加到您的body标记中，以使其影响您的所有网页，如下所示：

<body ng-app="sdp">
    <div ng-controller="MyCtrl">
    ...

以下是更改的完整代码：

var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('custom')
      .primaryPalette('blue')
      .accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {

});

.header {
    text-align: center;
    height: 80px;
    margin-left: 555px !important;
    line-height: 80px;
    color:white;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    color: #111;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
    background-size: cover;
}

<html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>Login to Data Portal</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  </head>
  <body ng-app="sdp">
      <div ng-controller="MyCtrl">
          <md-toolbar style="background: #174a7a;">
              <div class="md-toolbar-tools">
                  <h1 class="header">LOGIN</h1>
              </div>
          </md-toolbar>
      </div>
      <div>
          <md-card >
              <md-card-content>
                  <md-card-title>
                      <md-card-title-text>
                          <span class="md-headline">Card</span>
                      </md-card-title-text>
                  </md-card-title>
                  <ng-form name="colorForm">
                      <div layout-gt-xs="row">
                          <md-input-container>
                              <label> Username </label>
                              <input ng-model="un" required>
                          </md-input-container>

                           <md-input-container>
                              <label> Password </label>
                              <input ng-model="pswd" required>
                          </md-input-container>
                      </div>
                  </ng-form>
              </md-card-content>
          </md-card>
      </div>
  </body>
</html>

即使在加载css和js文件后，Angularjs材质设计输入也不起作用

1 个答案: