无法注入依赖ngMaterial

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

这里是一个示例（https://plnkr.co/edit/7N7i9TnMc77Nz6xlNhuk?p=preview）的Plunker。在app.js中，这是我实例化模块的地方，两个依赖关系都在那里。如果该行显示为：

angular.module('myApp', ['angularUtils.directives.dirPagination', 'ngMaterial']);

然后AngularJS崩溃，页面显示{{hello}}。然而，由于在控制，我已经设置$scope.hello到"Hello Plunker!"，如果线路上写着：

angular.module('myApp', ['angularUtils.directives.dirPagination']);

随后的页面显示“Hello Plunker！”。

我在做什么错？

感谢您的帮助！

来源

2017-07-07 student1868

您需要包括angular.js任何其他脚本之前将要使用的角度。在这里，您添加的script.js前angular.js

你还需要使用角模块角动画，角咏叹调，棱角分明的消息作为的angular.js的版本相同版本在这里，您使用的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>

您CA 1.6.4版本 n检查为我您的plnkr所做的修改https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview

而且有错误跨域请求bootstrap.min.css可以通过使用

HTTPS容易地固定：//

cdn

来源

2017-07-07 02:49:27

这个工作。非常感谢！ – student1868

您缺少material.css的脚本，并且顺序错误。

<script data-require="[email protected]" 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>

WORKING DEMO

来源

2017-07-07 02:42:53 Sajeetharan

这是一个工作演示，有版本问题以及声明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> 
 
\t  <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
 
    <script data-require="[email protected]" 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> 
 
\t \t <script> 
 
\t var app = angular.module('myApp', ['ngMaterial']); 
 
\t app.controller('myCtrl', function($scope, $http) { 
 
\t \t \t $scope.hello = "Hello Plunker!"; 
 
\t }); 
 

 

 
\t </script> 
 
    </body> 
 

 
</html>

来源

2017-07-07 03:17:44

无法注入依赖ngMaterial

回答

相关问题