无法注入依赖项ngMaterial
我希望开发一个同时使用dirPagination和AngularJS材料的应用程序。但是，我无法将ngMaterial依赖注入我的应用程序。angularUtils.directives.dirPagination依赖关系正常工作，但一旦添加ngMaterial，AngularJS应用程序就会崩溃。
下面是一个带有示例的柱塞(https://plnkr.co/edit/7N7i9TnMc77Nz6xlNhuk?p=preview)。在我实例化模块的app.js中，两个依赖项都存在。如果这一行是：
angular.module('myApp', ['angularUtils.directives.dirPagination', 'ngMaterial']);然后AngularJS崩溃，页面读{{hello}。但是，由于在控制器中，我将$scope.hello设置为"Hello Plunker!"，如果行读取：
angular.module('myApp', ['angularUtils.directives.dirPagination']);然后页面显示“你好柱塞！”。
我做错了什么？
谢谢你的帮忙!
回答 4
Stack Overflow用户
发布于 2017-07-07 02:49:27
- 您需要将angular.js放在要使用angular的任何其他脚本之前。在这里，您在script.js之前添加angular.js
- 您还需要使用与 angular.js 版本相同的角度模块(角-动画、角-咏叹调、角-消息)的版本，这里使用的是1.6.4版本 of angular.js。
您可以检查我对您的plnkr https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview所做的修改。
此外，bootstrap.min.css的跨域请求也存在错误，这些错误可以通过使用
https://
cdn
Stack Overflow用户
发布于 2017-07-07 02:42:53
您丢失了material.css的脚本，而顺序是错误的。
<script data-require="angular.js@1.3.0" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="script.js"></script>
<script src="dirPagination.js"></script>工作演示
Stack Overflow用户
发布于 2017-07-07 03:17:44
这是一个工作演示，有版本问题，也有声明JS文件的顺序。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div data-ng-app="myApp">
<div data-ng-controller="myCtrl">
<h1>{{hello}}</h1>
<md-toolbar class="md-warn">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope, $http) {
$scope.hello = "Hello Plunker!";
});
</script>
</body>
</html>
https://stackoverflow.com/questions/44961208
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号