angularjs - 在 shadow dom 中运行 Angular 应用程序

Question

我正在开发一个应用程序，我必须在当前页面中加载其他 angular(1.x) 应用程序(根据项目要求)。我正在尝试使用影子 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 中，但表达式未按预期编译。示例 - 具有变量 this.greeting = "Welcome!"的 Angular 应用程序我期待着:

 Welcome!

但它呈现为:

 {{greeting}}

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

谢谢。

Answer 1

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

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

如果您想使用 Shadow DOM，您将始终能够通过 <slot> tags 访问它。 .