無法注入依賴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

回答

相關問題