无法注入依赖 ngMaterial

Question

我希望开发一个同时使用 dirPagination 和 AngularJS material 的应用程序。但是，我无法将 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']);

然后页面显示"Hello Plunker!"。

我做错了什么？

感谢您的帮助！

Answer 1

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

WORKING DEMO

Answer 2

您需要在要使用 angular 的任何其他脚本之前包含 angular.js。这里在angular.js

script.js

您还需要使用相同版本的 angular 模块 angular-animate, angular-aria, angular-messages 与 angular.js 版本相同这里你使用了 1.6.4 version of 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://

cdn

Answer 3

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

Answer 4

我只是补充说 angular-material.js 需要 angular-animate.js 和 angular-aria.js，后两者应该在 angular-material.js 之前。 angular-messages.js 好像不需要。

无法注入依赖 ngMaterial

Unable to Inject Dependency ngMaterial

javascript

angularjs

angularjs-material

angularjs-1.6