以编程方式将 bs-popover 编译成 div 元素

Question

我是否有机会将 bs-popover 元素编译成我在 angularjs 中创建的 div 代码，然后将其添加到 DOM 所以我的弹出窗口有效吗？

menu.setAttribute('bs-popover',null);

所以基本上我希望这个 bs-popover 被编译到我的菜单元素中，它是这样创建的

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

我可以在 HTML 中添加这些属性，但事实是我的逻辑完全不同，我必须在代码中创建它。有什么想法吗？

Answer 1

就此而言，您可以使用 $compile 服务重新编译模板的该部分，它将解释您添加的属性，将 bs-popover 指令行为添加到您的新元素。

首先，将 $compile 服务注入到您的组件中。其次，在将元素添加到 dom 之前调用编译函数，最后，您可以将其附加到目标容器。

const menu = document.createElement('div');

// ...

menu.setAttribute('bs-popover',null);    

$compile(rightSideContainer)(scope);

rightSideContainer.appendChild(menu);

以编程方式将 bs-popover 编译成 div 元素

Compile bs-popover into div element programatically

angularjs

angularjs-directive

angularjs-scope

angular-compiler