运行 angular 影子内的应用程序 dom

Question

我正在开发一个应用程序，我必须在当前页面中加载其他 angular(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);

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

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

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

 Welcome!

但它呈现为：

 {{greeting}}

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

谢谢。

Answer 1

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

作为解决方法，您可以将 {{greeting}} 放在正常的 DOM 中。

如果您想使用 Shadow DOM，您将始终可以通过 访问它。