AngularJS材质在导入后不能正常工作

AngularJS Material not working properly after import

本文关键字:常工作 工作 不能 导入 AngularJS      更新时间:2023-09-26

我正在尝试导入角材质到我的项目。我已经阅读了如何使用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没有动画labelinput,你可以从CodePen链接中看到。我使用链接到图书馆从web代替本地路径只是为了显示结果。这是一样的。

我可能错过了一些小的东西,但这些是我第一次尝试使用AngularJSMaterial,所以感谢理解!

那么,我该怎么做才能使库正常工作呢?提前感谢!

一个变化是控制器没有加载,结果是按钮没有出现:

你的控制器代码new function()不正确

app.controller("LoginController", new function () {
});

校正控制器代码

app.controller("LoginController", function () {
});

希望这对你有帮助!