如何使用AngularJS材质将md按钮显示为md凸起
[英]How to display md-button as md-raised using AngularJS Material
问题描述
I am trying to have my buttons styled with AngularJS Material. 
我试图用AngularJS Material设置按钮样式。 Specifically, I want to use md-button with class md-raised. 具体来说，我想将md-button与md-raised类一起使用。
However, when I try this my button looks like regular text rather than an md-button. 但是，当我尝试此操作时，我的按钮看起来像常规文本，而不是md按钮。 What could I be doing wrong? 我可能做错了什么？
Here is my index.html where I am trying to place the button. 这是我尝试放置按钮的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>
2 个解决方案
解决方案1
1 已采纳 2017-06-25 06:59:17
The reason why it didn't appear is because you forgot to initialize your app! 之所以没有出现，是因为您忘记了初始化应用程序！
// 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
0 2017-06-25 06:52:28
I was able to accomplish this by adding 我能够通过添加
<div class="md-button md-raised">
<p>Button</p>
</div>
instead of 代替
<md-button class="md-raised">Button</md-button>
I'm not sure why this works though, and any feedback would be greatly appreciated. 我不知道为什么这行得通，任何反馈将不胜感激。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.