首页 文章

在阴影dom内运行角度应用程序

提问于
浏览 次
2

我正在开发一个应用程序，我将在当前页面中加载其他角度（1.x）应用程序（根据项目要求） . 我试图使用shadow DOM概念实现它（这可以使用iframe完成，但我正在寻找更好的方法） . 我试过下面的代码：

var templateUrl = "angular-app.html",
 templateReceivedCallback = function (response) {
      var templateHolder = $("#template-holder"),
          div = document.getElementById('template-holder'),
          shadowRoot = div.attachShadow({
              mode: 'open'
           });
       shadowRoot.innerHTML = response;
     };
 $.get(templateUrl, templateReceivedCallback);

我期望角应用程序应该加载到模板持有者元素中：

<div id="template-holder"></div>

另一个应用程序正在我提到的div中加载，但表达式未按预期编译 . 示例 - 具有变量this.greeting =“Welcome！”的Angular应用程序我期待着这个：

Welcome!

但它呈现为：

{{greeting}}

有没有更好的方法来实现这一目标？如果是，请与我分享运行示例 .

谢谢 .

angularjs templates web-component shadow-dom

1 回答

  • 1

    我认为这是不可能的，因为Angular解析引擎不会查看Shadow DOM .

    作为一种解决方法，您可以将 {{greeting}} 放在普通的DOM中 .

    如果您想使用Shadow DOM，您始终可以使用<slot> tags访问它 .

    回复于

相关问题