无法注入依赖关系 ngMaterial

我正在寻找开发一个同时使用dirPagination和AngularJS材料的应用程序。但是，我无法将ngMaterial依赖项注入我的应用程序中。angularUtils.directives.dirPagination依赖项工作正常，但是一旦我添加ngMaterial，AngularJS应用程序就会崩溃。

这是一个带有示例的 Plunker(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']);

然后页面显示"你好普伦克！

我做错了什么？

感谢您的帮助！

您需要

在任何其他将使用 angular 的脚本之前包含angular.js。在这里，您可以在角度之前添加脚本.js.js

您还需要使用与角度.js版本相同的角度模块angular-animate、angular-aria、angular-messages这里你使用了1.6.4 版本的angular.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>

您可以检查我对 plnkr https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview 所做的修改

此外，bootstrap.min的跨域请求也存在错误.css

可以使用

https://

加元

您缺少 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>

工作演示

这是一个工作演示，存在版本问题以及声明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>

我只想补充一点，angular-material.js需要angular-animate.js和angular-aria.js，后两者应该在angular-material.js之前。angular-messages.js似乎不是必需的。

相关内容

最新更新

热门标签：