I have been experimenting with angular Chart and angular Select. The Chart is working fine, but when I added a controller for the select control, an error occurred:
Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compileIndex.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;
}
/* Additional CSS styling */
</style>
<!-- Rest of the Index.cshtml content -->
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 (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>