这应该是一个简单的问题，一切正常。突然我遇到了这个错误，我尝试通过以下 Angular 网站来修复它。这对我没有帮助。这是我的代码，
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="script/d3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
App.Js:
var routerApp = angular.module('DuoDiginRt', ['ui.bootstrap', 'ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'Charts.html',
controller: 'DashboardCtrl'
})
});
routerApp.controller('DashboardCtrl', ['$scope', '$timeout',
function($scope, $timeout) {
$scope.gridsterOptions = {
margins: [20, 20],
columns: 4,
draggable: {
handle: 'h3'
}
};
$scope.dashboards = {
'1': {
id: '1',
icon: 'images/icons/chart_line.png',
name: 'Home',
widgets: [
{
col: 0,
row: 0,
sizeY: 1,
sizeX: 1,
icon: 'images/icons/chart_line.png',
name: "Stocks per store"
}
]
}
};
$scope.clear = function() {
$scope.dashboard.widgets = [];
};
$scope.addWidget = function() {
$scope.dashboard.widgets.push({
name: "New Chart",
sizeX: 1,
sizeY: 1
});
};
$scope.remove = function(widget) {
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
};
$scope.openSettings = function(widget) {
$modal.open({
scope: $scope,
templateUrl: 'chart_settings.html',
controller: 'chartSettingsCtrl',
resolve: {
widget: function() {
return widget;
}
}
});
};
$scope.ZoomIn = function () {
var ZoomInValue = parseInt(document.getElementById("container").style.zoom) + 10 + '%'
document.getElementById("container").style.zoom = ZoomInValue;
return false;
}
$scope.ZoomOut = function () {
var ZoomOutValue = parseInt(document.getElementById("container").style.zoom) - 10 + '%'
document.getElementById("container").style.zoom = ZoomOutValue;
return false;
}
$scope.Zoomorg = function () {
var ZoomOutValue = parseInt(100) + '%'
document.getElementById("container").style.zoom = ZoomOutValue;
return false;
}
$scope.openBox = function(){
$("#toolboxControl").css("left","0px");
$("#openbox").css("display","none");
$("#closebox").css("display","block");
}
$scope.closeBox = function(){
$("#toolboxControl").css("left","-250px");
$("#closebox").css("display","none");
$("#openbox").css("display","block");
}
$scope.vopenBox = function(){
$("#variablepanel").css("right","0px");
$("#vopenbox").css("display","none");
$("#vclosebox").css("display","block");
}
$scope.vcloseBox = function(){
$("#variablepanel").css("right","-250px");
$("#vclosebox").css("display","none");
$("#vopenbox").css("display","block");
}
$scope.$watch('selectedDashboardId', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.dashboard = $scope.dashboards[newVal];
} else {
$scope.dashboard = $scope.dashboards[1];
}
});
// init dashboard
$scope.selectedDashboardId = '1';
}
])
HTML:
<body ng-controller="DashboardCtrl">
<div id="main_wrapper">
<div id="toolboxControl">
<div id="toolbaropener">
<div id="openbox" ng-click="openBox()">></div>
<div id="closebox" ng-click="closeBox()"><</div>
</div>
<div id="containerChart">
<ul>
<li>
<a ng-click="addWidget()" href="#controlflow">Charts</a>
<div id="controlflow" class="containerChart">
<input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls...">
<div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable>
<img class="toolheader" src="{{widget.Icon}}">
<div class="toolcontent">{{widget.name}}</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="container" class="drop-container" ng-click="addEvent($event)" droppable>
<div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
data-identifier="{{widget.id}}">
<div class="box" ng-controller="CustomWidgetCtrl">
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right">
<a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<!-- <bars data="40,4,55,15,16,33,52,20"></bars> -->
<!-- <bargraph id="d3bar" datajson="sample.json"
xaxis-name = "Year"
xaxis-pos = "905"
yaxis-name = "Frequency"
yaxis-pos = "12"
d3-format= ".0%"> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div post-render></div>
<span ng-init="init()"></span>
</div>
最佳答案
当我将 ngAnimate 引入具有旧版本 Angular 的项目时，我也遇到了未知提供程序问题。最好的选择是在项目中使用与当前 Angular 版本相同的 ngAnimate 版本。
它们似乎是同时发布的。
查看 Angular 的版本(位于 JS 文件的顶部)并确定其发布时间，并找到 ngAnimate 的匹配版本。
Barang 也有可能在旧版本的 Chrome(可能还有 Firefox)中导致此问题。如果使用，请禁用。
更新:
查看代码，有两个版本的 Angular 正在加载；版本 1.0.6 和 1.2.15。您只能加载一个版本。
关于javascript - Uncaught Error : [$injector:unpr] Unknown provider: $animateProvider，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27560030/