未捕获错误:[$ injector:unpr]未知提供者:$ animateProvider

时间:2014-12-19 05:06:51

标签: javascript html angularjs d3.js

这应该是一个简单的问题,eveything工作正常。突然间,我陷入了这个错误,我试图通过跟随有角度的网站来修复它。它没有帮助我。这是我的代码,

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>

1 个答案:

答案 0 :(得分:1)

当我将ngAnimate引入具有旧版Angular的项目时,我也看到了未知提供商问题。最好的办法是在项目中使用等于当前Angular版本的ngAnimate版本。

它们似乎同时被释放。

查看Angular的版本(位于JS文件的顶部)并确定它何时发布并找到ngAnimate的匹配版本。

Barang也可能在旧版本的Chrome(以及可能的Firefox)中导致此问题。如果使用,请禁用。

<强>更新

查看代码后,有两个版本的Angular被加载;版本1.0.6和1.2.15。您只能加载一个版本。