javascript - AngularJS Material 导入后无法正常工作

标签 javascript angularjs angular-material

我正在尝试导入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 链接中看到的那样。我使用了来自网络的库链接而不是本地路径只是为了显示结果..它是相同的。

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

那么,我应该怎样做才能让图书馆发挥应有的作用呢? 提前致谢!

最佳答案

一项更改是 Controller 未加载,因此按钮未出现:

您的 Controller 代码 function() 不正确

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

});

更正了 Controller 代码

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

});

希望这有帮助!

关于javascript - AngularJS Material 导入后无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931966/

相关文章:

javascript - IE 中的按键问题(在 jquery 中)

javascript - Angular Material 对话框中的自动对焦文本区域不起作用

javascript - 尝试使用 ngMaterial 但我得到 $injector :modulerr error

javascript - 是否有可能访问函数的闭包?

javascript - 在 Cytoscape.js 中查找 Node 之间的唯一对

javascript - Angular1.3 : Access functions from standard controllers, 在使用controllerAs的 View 内?

javascript - 通过 Angular Directive(指令)删除然后添加元素会破坏输入 [radio] 上的 ng-model

javascript - Angular : Re-use controller functions and templates in different controllers

javascript - 如何使用新的 `controller as` 语法执行 $scope.$apply() ?

Angular Material 对话框 - 将类型传递到对话框组件中