采用了棱角分明的材料

创建于角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

采用了棱角分明的材料

回答

相关问题