1
我正在玩角度圖和角度選擇。圖表運作良好。 添加控制器選擇控制後，我得到錯誤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>