代码之家 › 专栏 › 技术社区 › student1868

无法注入依赖项ngMaterial

angularjs-material angularjs-1.6 angularjs javascript

student1868 · 技术社区 · 8 年前

ngMaterial 依赖于我的应用程序。这个 angularUtils.directives.dirPagination 依赖性很好,但只要我添加 天然气材料 ,AngularJS应用程序崩溃。

下面是一个Plunker示例( https://plnkr.co/edit/7N7i9TnMc77Nz6xlNhuk?p=preview ). 应用程序内。js,这是我实例化模块的地方,两个依赖项都在那里。如果该行显示:

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

然后AngularJS崩溃,页面显示{{hello}}。然而,由于在控制器中,我设置了 $scope.hello 到 "Hello Plunker!" ,如果该行显示:

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

然后页面显示“Hello Plunker!”。

谢谢你的帮助!

4 回复 | 直到 8 年前

KRISHNA PATEL 8 年前

你需要包括 角度.js 角度.js

您还需要使用相同版本的角度模块作为的版本这是你用过的 1.6.4版本 角度.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>

https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview

此外,bootstrap.min.css的跨域请求也存在错误,可以使用

https://

Sajeetharan 8 年前

  <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

Rohan Kawade 8 年前

这是一个正在运行的演示,有版本问题,还有声明顺序 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>

Thomas David Kehoe 5 年前

angular-material.js angular-animate.js 和 angular-aria.js ,后两个应该放在前面 . angular-messages.js