Decorating Angular-UI Bootstrap modal

Question

I have a feature that I am building that is about 90% of the functionality the Angular-UI Bootstrap Modal provides. The only difference is:

• The modal needs to be positioned relative to a container div (I've already handled the styling aspect with the windowClass)

At issue is that the $modalStack service hard codes the body.append call, as seen here:

body.append(modalDomEl)
body.addClass(OPENED_MODAL_CLASS)

Step one is here

I started by simply copying / pasting the open methods on each service (renaming as openWithinElement), and modifying what I needed to make it work. As you can see, if you run the app, it throws an error on the $q dependency not being defined. Okay, I guess that makes sense.

Next I added the dependencies to the provider.decorator method, which bypassed all dependency errors. But then I was getting another error, function getTemplatePromise is undefined ... well of course it isn't defined. It's an internal method to the service.

That's when I got truly stuck. It seems impossible to decorate this service with a new method, without redefining all of the private functions / objects / props within the service.

Is that the case?

[EDIT TO ADD] I ultimately ended up decorating the service with an updateParentElement method, which then moved the modal to the passed in element, which was executed in the .opened promise. It's hacky, but works, but I'm hoping there's something I'm missing with decorators. [/EDIT]

Answer 1

The simplest solution as I see it will be to provide specific windowClass, then after dialog is open find its element by that class and move it to the container.