ui bootstrap multiple decorators

Question

Used this link to update my accordion template. Now I need to replace another UI bootstrap template for carousel. Is there a way that I can chain the decorator functions together or should it be done another way? Also, what if I need to have various versions of the carousel? What then?

What i have right now obviously isn't working:

.config(['$provide', Decorate])

function Decorate($provide) {
  $provide.decorator('accordionGroupDirective', function($delegate) {
    var directive = $delegate[0];

    directive.templateUrl = '/modules/projects/views/admin/templates/accordian.html';

    return $delegate;
  })
  .decorator('carousel', function($delegate) {
    var directive = $delegate[0];

    directive.templateUrl = '/modules/projects/views/admin/templates/carousel.html';

    return $delegate;
  })

}

We have a version of ui-bootstrap without templates, with that there is no need of monkey patching it. — Jesus Rodriguez, Jul 03 '15 at 21:55
So what happens if I need to have 2 different carousel templates? — Justin Young, Jul 04 '15 at 00:06
Essential what I need to create is a carousel within a carousel — Justin Young, Jul 04 '15 at 00:17

Pankaj Parkar · Answer 1 · 2016-05-12T10:20:24.763

Whenever you wanted to decorate any of the existing component from configuration phase of angular, you need to append the Component type to its name, like here you are going to decorate Directive, so you need to provider the name to decorator as carouselDirective instead of just carousel.

Code

.decorator('carouselDirective', function($delegate) {
    var directive = $delegate[0];

    directive.templateUrl = '/modules/projects/views/admin/templates/carousel.html';

    return $delegate;
})

ui bootstrap multiple decorators

1 Answers1