未知提供者：accordionDirectiveProvider答案

【问题标题】：Unknown provider: accordionDirectiveProvider未知提供者：accordionDirectiveProvider
【发布时间】：2016-11-29 05:15:36
【问题描述】：

谁能帮我找出我的错误在哪里？我使用this example 在我的页面上构建可排序的手风琴。示例运行良好，但我已将此代码放入我的应用程序并收到此错误

angular.js:68 未捕获错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：错误：[$injector:unpr] 未知提供者：手风琴DirectiveProvider http://errors.angularjs.org/1.5.7/$injector/unpr?p0=accordionDirectiveProvider 在http://localhost:63342/myapp%202.0/libs/angular/angular.js:68:20 在http://localhost:63342/myapp%202.0/libs/angular/angular.js:4502:27 在 Object.getService [as get] (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4655:53) 在 Object.decorator (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4577:49) 在http://localhost:63342/myapp%202.0/js/app/app.js:56:18 在 Object.invoke (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4709:31) 在 runInvokeQueue (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4602:49) 在http://localhost:63342/myapp%202.0/libs/angular/angular.js:4611:25 在 forEach (http://localhost:63342/myapp%202.0/libs/angular/angular.js:321:34) 在 loadModules (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4592:13) http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=app&p1=Error%3A%20%…localhost%3A63342%2Fmyapp%25202.0%2Flibs%2Fangular%2Fangular.js%3A4592%3A13)

从这一行我可以看出，我的提供者出了点问题

http://localhost:63342/myapp%202.0/js/app/app.js:56:18 at Object.invoke 

 .config(['$provide', function ($provide){
    $provide.decorator('accordionDirective', function($delegate) {
        var directive = $delegate[0];
        directive.replace = true;
        return $delegate;
    });
}])

但是，无论我从这个提供商那里清除我的代码，手风琴停止工作。我的错误在哪里？我很抱歉，但无法在 plunker 中发现这个错误，所以把我的代码放在下面

    (function () {

    window.app = angular.module('app', ['ngRoute','ngAnimate', 'ui.bootstrap', 'ui.sortable', 'ngSanitize',
        'ngTouch',
        'ui.grid',
        'ui.grid.exporter',
        'ui.grid.selection',
        'ui.grid.pagination',

        'ui.grid.saveState',
        'ui.grid.cellNav',
        'ui.grid.resizeColumns',
        'ui.grid.moveColumns',
        'ui.grid.pinning',
        'ui.grid.grouping',
        'ui.grid.autoResize',

        'ui.grid.edit',
        'ui.grid.rowEdit'
    ])

        .run(['$rootScope', function($rootScope) {
            $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
                $rootScope.title = current.$$route.title;
            });
        }])

        .config(['$httpProvider', function ($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common["X-Requested-With"];
        }])

        .config(['$routeProvider',
            function($routeProvider) {
            $routeProvider
                .when('/', {
                    title: " ",
                    controller: 'homeCtrl'
                })
                .when('/page', {
                    title: 'GRID',
                    templateUrl: 'html/pages/grid.html',
                    controller: 'gridCtrl'
                })
                .when('/designer', {
                    title: 'Design Grid',
                    templateUrl: 'html/pages/designer.html',
                    controller: 'designerCtrl'
                })
                .otherwise({
                    redirectTo: '/'
            });
        }])

    .config(['$provide', function ($provide){
        $provide.decorator('accordionDirective', function($delegate) {
            var directive = $delegate[0];
            directive.replace = true;
            return $delegate;
        });
    }])

        .filter('makeUppercase', function () {
            return function (item) {
                var space = item.replace(/\./g, " ");
                var result = space.replace(/([A-Z])/g, " $1");
                return result.charAt(0).toUpperCase() + result.slice(1)
            };
        })

}());

html

 <uib-accordion  ui-sortable="sortableOptions" ng-model="panels">
                <uib-accordion-group ng-repeat="panel in panels">
                <uib-accordion-heading>
                    <div class="handle"><i class="fa fa-arrows pull-left"></i></div>
                    <span class="panel-title-left">{{panel.heading}}</span>
                    <i class="caret pull-right"></i>
                </uib-accordion-heading>
                   <div ng-include=" panel.url "></div>
            </uib-accordion-group>
            </uib-accordion>

【问题讨论】：

除非它只是某个地方的拼写错误，否则对我来说一切都很好。您确定此手风琴模块已安装并包含在您的索引文件中吗？
@Riv 你说的手风琴模块是什么意思？这个手风琴指令不需要任何依赖 angular-ui.github.io/bootstrap/#/accordion

标签： javascript angularjs angular-ui-bootstrap accordion jquery-ui-sortable

【解决方案1】：

如果您使用 uib-tools 1.+，则可能会出现此错误。在最新版本中，他们将指令的名称从“手风琴”更改为“uibAccordion”，因此您可能必须使用“uibAccordionDirective”。看例子

  .config(['$provide', function ($provide){
         $provide.decorator('uibAccordionDirective', function($delegate) {
                var directive = $delegate[0];
                directive.replace = true;
                return $delegate;
            });
        }])

【讨论】：