您的位置: 首页  >  技术问答  >  ASP.NET mvc angularjs未知提供者错误

ASP.NET mvc angularjs未知提供者错误

分类: 技术问答 • 2022-09-11 09:43:57
问题描述：

我正在玩角度图和角度选择。图表运作良好。 添加控制器选择控制后，我得到错误Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile。如何解决这个错误以及它为什么会发生？ASP.NET mvc angularjs未知提供者错误

Index.cshtml

@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<style> 
    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     width: 200px; 
     background-color: #f1f1f1; 
    } 
    li a { 
     display: block; 
     color: #000; 
     padding: 8px 0 8px 16px; 
     text-decoration: none; 
    } 
    li a:hover { 
     background-color: #555; 
     color: white; 
    } 
    .header { 
     background: #f1f1f1; 
     height: 120px; 
     width: 100%; 
     margin: 0; 
    } 
    td{ 
     vertical-align:top; 
     width:33%; 
    } 
    .first-column{ 
     width:15%; 
     float:left; 
    } 
    .second-column{ 
     width:40%; 
     float:left; 
    } 
    .third-column { 
     width: 45%; 
     float: left; 
    } 
    .second-column table{ 
     padding:5px; 
    } 
</style> 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css" /> 
<script src="~/Scripts/angular.js"></script> 
<script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.js"></script> 
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script> 
<script src="~/Scripts/MyScripts/Chart.js"></script> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script> 
<script src="~/Scripts/angular-messages.min.js"></script> 
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script> 

<div class="header"></div> 


<div class="first-column"> 
    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    </ul> 
</div> 
<div class="second-column"> 
<table> 
    <tbody> 
     <tr> 
      <td> 
       <div class="test1"> 
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo"> 
         <span class="glyphicon glyphicon-plus-sign"></span> 
        </button> 
        Test1 
        <div id="demo" class="collapse"> 
         Test1 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="test2"> 
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo1"> 
         <span class="glyphicon glyphicon-plus-sign"></span> 
        </button> 
        Test2 
        <div id="demo1" class="collapse"> 
         Test2 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 
</div> 
<div class="third-column"> 
    <table> 
     <tbody> 
      <tr> 
       <canvas id="line" class="chart chart-line" chart-data="data" 
         chart-labels="labels" chart-legend="true" chart-series="series" 
         chart-click="onClick"></canvas> 
      </tr> 
      <tr> 
       <div ng-controller="SelectOptGroupController" class="md-padding selectdemoOptionGroups" ng-cloak=""> 
        <div> 
         <h1 class="md-title">Pick your pizza below</h1> 
         <div layout="row"> 
          <md-input-container style="margin-right: 10px;"> 
           <label>Size</label> 
           <md-select ng-model="size"> 
            <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option> 
           </md-select> 
          </md-input-container> 
          <md-input-container> 
           <label>Topping</label> 
           <md-select ng-model="selectedToppings" multiple=""> 
            <md-optgroup label="Meats"> 
             <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option> 
            </md-optgroup> 
            <md-optgroup label="Veggies"> 
             <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option> 
            </md-optgroup> 
           </md-select> 
          </md-input-container> 
         </div> 
         <p ng-if="selectedToppings"> 
          You ordered a {{size.toLowerCase()}} pizza with 
          {{printSelectedToppings()}}. 
         </p> 
        </div> 
       </div> 
      </tr> 
     </tbody> 
    </table> 

</div> 


<script> 
    $(document).ready(function() { 
     $("#demo").on("hide.bs.collapse", function() { 
      $(".test1 > .btn").html('<span class="glyphicon glyphicon-plus-sign"></span>'); 
     }); 
     $("#demo").on("show.bs.collapse", function() { 
      $(".test1 > .btn").html('<span class="glyphicon glyphicon-minus-sign"></span>'); 
     }); 

     $("#demo1").on("hide.bs.collapse", function() { 
      $(".test2 > .btn").html('<span class="glyphicon glyphicon-plus-sign"></span>'); 
     }); 
     $("#demo1").on("show.bs.collapse", function() { 
      $(".test2 > .btn").html('<span class="glyphicon glyphicon-minus-sign"></span>'); 
     }); 
    }); 

</script>

chart.js之

var app = angular.module("myApp", ['chart.js', 'ngMaterial', 'ngMessages', 'material.svgAssetsCache']); 

app.controller("LineCtrl", function ($scope) { 

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
$scope.series = ['Series A', 'Series B']; 
$scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
]; 
$scope.onClick = function (points, evt) { 
    console.log(points, evt); 
}; 
}); 

app.controller('SelectOptGroupController', function($scope) { 
$scope.sizes = [ 
    "small (12-inch)", 
    "medium (14-inch)", 
    "large (16-inch)", 
    "insane (42-inch)" 
]; 
$scope.toppings = [ 
    { category: 'meat', name: 'Pepperoni' }, 
    { category: 'meat', name: 'Sausage' }, 
    { category: 'meat', name: 'Ground Beef' }, 
    { category: 'meat', name: 'Bacon' }, 
    { category: 'veg', name: 'Mushrooms' }, 
    { category: 'veg', name: 'Onion' }, 
    { category: 'veg', name: 'Green Pepper' }, 
    { category: 'veg', name: 'Green Olives' } 
]; 
$scope.selectedToppings = []; 
$scope.printSelectedToppings = function printSelectedToppings(){ 
    // If there is more than one topping, we add an 'and' and an oxford 
    // comma to be gramatically correct. 
    if (this.selectedToppings.length > 1) { 
     var lastTopping = ', and ' + this.selectedToppings.slice(-1)[0]; 
     return this.selectedToppings.slice(0,-1).join(', ') + lastTopping; 
    } 
    return this.selectedToppings.join(''); 
}; 
});

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body ng-app="myApp" ng-controller="LineCtrl"> 
    @RenderBody() 
    @RenderSection("scripts", required: false) 
</body> 
</html>

答

我以前见过这个。对我来说，它是angular.js和angular-animate.js版本不同步。您可以尝试确保两个版本相同。

相关推荐