antonyboom antonyboom - 4 months ago 37
AngularJS Question

Unknown provider: accordionDirectiveProvider

Could anybody help me to figure out where my mistake is? I used this example that to build sortable accordion on my page. Example works well, but I've put this code to my app and got this error



angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown
provider: accordionDirectiveProvider
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=accordionDirectiveProvider
at http://localhost:63342/myapp%202.0/libs/angular/angular.js:68:20
at http://localhost:63342/myapp%202.0/libs/angular/angular.js:4502:27
at Object.getService [as get] (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4655:53)
at Object.decorator (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4577:49)
at http://localhost:63342/myapp%202.0/js/app/app.js:56:18
at Object.invoke (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4709:31)
at runInvokeQueue (http://localhost:63342/myapp%202.0/libs/angular/angular.js:4602:49)
at http://localhost:63342/myapp%202.0/libs/angular/angular.js:4611:25
at forEach (http://localhost:63342/myapp%202.0/libs/angular/angular.js:321:34)
at 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)



As I can see from this line something wrong with my provider

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;
});
}])


But however I clear my code from this provider, accordion stop working. Where is my mistake? I apologize but cannot catch this error in the plunker so put my code below

(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>

Answer

This error can be if you use uib-tools 1.+. In latest version they have changed the name of directive from 'accordion' to 'uibAccordion', so probably you have to use 'uibAccordionDirective'. See example

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