0

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?

kamilws
  • 171
  • 1
  • 16

1 Answers1

1

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);
lenilsondc
  • 9,590
  • 2
  • 25
  • 40