採用了棱角分明的材料

創建於角JS形式我不斷收到此錯誤：採用了棱角分明的材料

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApplication due to:(…)

我試圖命名firstApplication幾種不同的方式，但未能如願。我有一種感覺，它是一個簡單的解決方案，但我似乎無法弄清楚。

這裏是我的html

<head> 
    <title></title> 
    <link type="text/css" src="style.css"></link> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.0/angular-material.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/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://cdn.gitcdn.link/cdn/angular/bower-material/v0.8.0/angular-material.js"></script> </head> 

<body ng-app="firstApplication"> 
    <div data-ng-controller="ContactFormController as cf" flex layout="row" layout-align="center center"> 
     <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2"> 
      <md-content class="md-padding"> 
       <form name="contactForm" data-ng-submit="cf.sendMail()"> 
        <md-input-container> 
         <lable>Name:</lable> 
         <input type="text" data-ng-model="cf.contactName" required> 
        </md-input-container> 
        <md-input-container> 
         <lable>Email</lable> 
         <input type="email" data-ng-model="cf.contactEmail" required> 
        </md-input-container> 
        <md-input-container> 
         <lable>Message</lable> 
         <textarea data-ng-model="cf.contactMsg" columns="1" required></textarea> 
        </md-input-container> 
        <md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid)}">Send</md-button> 
       </form> 
      </md-content> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> </body>

這是我的角碼

'use strict'; angular.module('firstApplication', ['$scope','$mdToast', '$animate']) 
      .controller('ContactFormController', ContactFormController); 

     function ContactFormController ($scope, $mdToast, $animate) { 
      $scope.toastPosition ={ 
      bottom: false, 
      top:true, 
      left: false, 
      right:true 
      }; 
      $scope.getToastPosition = function(){ 
       return Object.keys($scope.toastPosition) 
       .filter(function(pos){ 
        return $scope.toastPosition[pos]; 
       }) 
       .join(' '); 
      }; 

      $this.sendMail = function(){ 
       $mdToast.show(
        $mdToast.simple() 
         .content('Thanks for your message' + this.contactName +'You Rock') 
         .position($scope.getToastPosition()) 
         .hideDelay(5000) 
       ); 
      }; 

     };

來源

2016-11-22 Ank R

有你的代碼的幾個問題。您有重複的腳本引用，您引用了不同版本的Angular庫，您在主要Angular模塊中的注入不正確，並且您在控制器中使用了$this而不是this。下面是在糾正這些問題的更新摘要（我還沒有解決什麼周圍的麪包你的代碼試圖做的，因爲我不熟悉）：

angular.module('firstApplication', ['ngMaterial']) 
 
    .controller('ContactFormController', ContactFormController); 
 

 
function ContactFormController($scope, $mdToast, $animate) { 
 
    $scope.toastPosition = { 
 
    bottom: false, 
 
    top: true, 
 
    left: false, 
 
    right: true 
 
    }; 
 
    $scope.getToastPosition = function() { 
 
    return Object.keys($scope.toastPosition) 
 
     .filter(function(pos) { 
 
     return $scope.toastPosition[pos]; 
 
     }) 
 
     .join(' '); 
 
    }; 
 

 
    this.sendMail = function() { 
 
    $mdToast.show(
 
     $mdToast.simple() 
 
     .content('Thanks for your message' + this.contactName + 'You Rock') 
 
     .position($scope.getToastPosition()) 
 
     .hideDelay(5000) 
 
    ); 
 
    }; 
 

 
};

<head> 
 
    <title></title> 
 
    <link type="text/css" src="style.css"></link> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.0/angular-material.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
    <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-route.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://cdn.gitcdn.link/cdn/angular/bower-material/v0.8.0/angular-material.js"></script> 
 
</head> 
 

 
<body ng-app="firstApplication"> 
 
    <div data-ng-controller="ContactFormController as cf" flex layout="row" layout-align="center center"> 
 
    <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2"> 
 
     <md-content class="md-padding"> 
 
     <form name="contactForm" data-ng-submit="cf.sendMail()"> 
 
      <md-input-container> 
 
      <label>Name:</label> 
 
      <input type="text" data-ng-model="cf.contactName" required> 
 
      </md-input-container> 
 
      <md-input-container> 
 
      <label>Email</label> 
 
      <input type="email" data-ng-model="cf.contactEmail" required> 
 
      </md-input-container> 
 
      <md-input-container> 
 
      <label>Message</label> 
 
      <textarea data-ng-model="cf.contactMsg" columns="1" required></textarea> 
 
      </md-input-container> 
 
      <md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid)}">Send</md-button> 
 
     </form> 
 
     </md-content> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
</body>

來源

2016-11-22 18:56:23 Lex

謝謝。有效。烤麪包只是在屏幕右上方留下一個人名的消息，並說你搖滾！ –

我看到有三代碼中的錯誤：

你應該head參考app.js，不是在body底部
英語新HOULD與angular.module('firstApplication', ['ngMaterial'])
更換angular.module('firstApplication', ['$scope','$mdToast', '$animate'])你應該改變$this.sendMail = function(){到this.sendMail = function(){

而且，你引用

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>

兩次

來源

2016-11-22 19:11:54

採用了棱角分明的材料

回答

相關問題