Is there any chance I could compile a bs-popover element into div that i'm creating in angularjs in code and then add it to the DOM so my popover works ?
menu.setAttribute('bs-popover',null);
So basically I'd like this bs-popover to be compiled into my menu element which is created this way
const menu = document.createElement('div');
menu.className += 'layout-row layout-align-center-center containerTrigger';
menu.setAttribute("id", "openMenuTrigger");
menu.setAttribute("data-content", "null");
menu.setAttribute("data-template-url", "app/main/rgc/project/components/project-details/general-info/status-menu.html");
menu.setAttribute("data-animation", "am-flip-x");
menu.setAttribute("data-auto-close", "1");
menu.setAttribute('bs-popover',null);
rightSideContainer.appendChild(menu);
I'm able to add those attributes in HTML but the truth is my logic is quite different and I have to create it in code. Any thoughts?
For that matter, you can recompile that portion of the template by using the $compile service and it will interpret the attributes you have added adding the bs-popover directive behavior to your new element.
First, inject the $compile service onto your component. Second, call the compile function before adding the element into the dom and finally, you can append it to your target container.
const menu = document.createElement('div');
// ...
menu.setAttribute('bs-popover',null);
$compile(rightSideContainer)(scope);
rightSideContainer.appendChild(menu);