我正在尝试导入Angular Material到我的项目。我已经阅读了如何使用 bower
执行此操作,并且所有需要的文件都位于 bower_components
下。我创建了简单的文件来测试一切是否正常工作,但我有一些问题。首先是代码:
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<md-button class="md-raised" style="background-color: #112233;
color: white;">Button</md-button>
<br />
<md-input-container>
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
在这里您可以看到输出是什么:CodePen
因此,md-button
已正确呈现,但文本未显示,并且 md-input-container
未对 label
和 进行动画处理输入
,如您从 CodePen
链接中看到的那样。我使用了来自网络的库链接而不是本地路径只是为了显示结果..它是相同的。
我可能错过了一些小东西,但这是我第一次尝试使用 AngularJS
和 Material
所以感谢您的理解!
那么,我应该怎样做才能让图书馆发挥应有的作用呢? 提前致谢!
最佳答案
一项更改是 Controller 未加载,因此按钮未出现:
您的 Controller 代码新 function() 不正确
app.controller("LoginController", new function () {
});
更正了 Controller 代码
app.controller("LoginController", function () {
});
希望这有帮助!
关于javascript - AngularJS Material 导入后无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931966/