angularjsangularjs-directiveangularjs-scopeangular-compiler

Compile bs-popover into div element programatically


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?


Solution

  • 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);