Angular Material - 不 working/Rendering w/o 具体 class
Angular Material - Not working/Rendering w/o specific class
所以我正在学习 Angular Material 并决定从头开始尝试,而不是从入门演示中复制代码。
问题 - Angular Material 不显示,除非我在 class 中指定元素名称。例如
<md-button class="md-button md-raised loginBtnBackgroundColor toolbarFontColor">
Login
</md-button>
<md-button class="md-raised registerBtnBackgroundColor toolbarFontColor">
Register
</md-button>
我将添加 HTML 代码以查看是否有人看到该问题。我已经尝试了几个小时,但没能明白为什么它与入门应用程序相比不起作用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Scoutlit - AngularMaterial</title>
<!-- Anglar Material CSS -->
<!--<link rel="stylesheets" type="text/css" href="bower_components/angular-material/angular-material.min.css">-->
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<!-- Main CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body ng-app="angularMaterialDemo">
<div layout="row">
<md-toolbar class="md-toolbar-tools md-whiteframe-z2">
<!-- this isn't need i believe since we can add the class to the md toolbar <div class="md-toolbar-tools">-->
<img src="http://scoutlit.com/images/logo-small.png" border="0" class="">
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button class="md-button md-raised loginBtnBackgroundColor toolbarFontColor">
Login
</md-button>
<md-button class="md-raised registerBtnBackgroundColor toolbarFontColor">
Register
</md-button>
<!--</div>-->
</md-toolbar>
</div>
<!--
<div ng-view>
</div>
-->
</body>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<!-- My JS -->
<script src="assets/js/controllers/homepageController.js"></script>
<script src="assets/js/app.js"></script>
</html>
下图Link(我需要声望)
Image of Issue
不知道你的 javascript 代码,我猜你只是忘了在你的应用程序中导入 ngMaterial
模块,没有它指令将无法完全呈现。
angular.module('angularMaterialDemo', ['ngMaterial']);
为什么它与 class 一起工作是因为 md-button
指令除了创建一个包含 class .md-button
的按钮外什么都不做。
事实证明我有一个 $injector:modulerr 错误,它不允许 angular 发挥它的魔力。错误是由于我指向的 CDN 也是最新的 angularjs,它不使用 ng-Route。
所以我正在学习 Angular Material 并决定从头开始尝试,而不是从入门演示中复制代码。
问题 - Angular Material 不显示,除非我在 class 中指定元素名称。例如
<md-button class="md-button md-raised loginBtnBackgroundColor toolbarFontColor">
Login
</md-button>
<md-button class="md-raised registerBtnBackgroundColor toolbarFontColor">
Register
</md-button>
我将添加 HTML 代码以查看是否有人看到该问题。我已经尝试了几个小时,但没能明白为什么它与入门应用程序相比不起作用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Scoutlit - AngularMaterial</title>
<!-- Anglar Material CSS -->
<!--<link rel="stylesheets" type="text/css" href="bower_components/angular-material/angular-material.min.css">-->
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<!-- Main CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body ng-app="angularMaterialDemo">
<div layout="row">
<md-toolbar class="md-toolbar-tools md-whiteframe-z2">
<!-- this isn't need i believe since we can add the class to the md toolbar <div class="md-toolbar-tools">-->
<img src="http://scoutlit.com/images/logo-small.png" border="0" class="">
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button class="md-button md-raised loginBtnBackgroundColor toolbarFontColor">
Login
</md-button>
<md-button class="md-raised registerBtnBackgroundColor toolbarFontColor">
Register
</md-button>
<!--</div>-->
</md-toolbar>
</div>
<!--
<div ng-view>
</div>
-->
</body>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<!-- My JS -->
<script src="assets/js/controllers/homepageController.js"></script>
<script src="assets/js/app.js"></script>
</html>
下图Link(我需要声望) Image of Issue
不知道你的 javascript 代码,我猜你只是忘了在你的应用程序中导入 ngMaterial
模块,没有它指令将无法完全呈现。
angular.module('angularMaterialDemo', ['ngMaterial']);
为什么它与 class 一起工作是因为 md-button
指令除了创建一个包含 class .md-button
的按钮外什么都不做。
事实证明我有一个 $injector:modulerr 错误,它不允许 angular 发挥它的魔力。错误是由于我指向的 CDN 也是最新的 angularjs,它不使用 ng-Route。