如何使用AngularJS Material将md-button显示为md-raised答案

【问题标题】：How to display md-button as md-raised using AngularJS Material如何使用AngularJS Material将md-button显示为md-raised
【发布时间】：2017-11-28 08:08:23
【问题描述】：

我正在尝试使用 AngularJS 材质设置我的按钮样式。具体来说，我想将 md-button 与 md-raised 类一起使用。

但是，当我尝试此操作时，我的按钮看起来像常规文本而不是 md 按钮。我可能做错了什么？

这是我试图放置按钮的 index.html。

<!doctype html>
<html>
<head>
    <!--Angular scripts-->
    <link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
    <script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="node_modules/angular-resource/angular-resource.js"></script>
    <script src="mainController.js"></script>
</head>
<body>
    <md-button class="md-raised">Button</md-button>
</body>

【问题讨论】：

标签： javascript html css angularjs angularjs-material

【解决方案1】：

没有出现是因为你忘记初始化你的应用了！

// Initialize your app here and add `ngMaterial` dependency
angular.module('App', ['ngMaterial']);

<!-- Also add your ng-app directive -->
<html ng-app="App">

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

<body>
  <md-button class="md-raised">Test</md-button>
</body>

</html>

【讨论】：

哦，当然！我现在觉得自己很傻。感谢您的帮助！

【解决方案2】：

我可以通过添加来实现这一点

    <div class="md-button md-raised">
        <p>Button</p>
    </div>

而不是

<md-button class="md-raised">Button</md-button>

我不确定为什么会这样，任何反馈都将不胜感激。

【讨论】：

那是你忘记初始化应用了！