在影子dom

Question

我正在开发一个应用程序，我可以在当前页面中加载其他角度（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的角度应用程序=＆＃34;欢迎！＆＃34;我期待着这个：

 Welcome!

但它呈现为：

 {{greeting}}

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

感谢。

Answer 1

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

作为一种解决方法，您可以将{{greeting}}置于普通DOM中。

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