angularjs - 将 Polymer 或 Web Components 模板链接/编译到 Angularjs Scope

Question

我有一个 Polymer组件(Web组件)，我在其中放置了一个 Angular Controller ，如下所示:

<polymer-element name="x-display"
  attributes="title body">
  <template>
    <h2>{{title}}</h2>
    <p>{{body}}</p>
    <p ng-controller="XDisplayController" ng-bind="text"></p>
  </template>
  <script>
    Polymer('x-display', {
      title: "",
      body: ""
    });
  </script>
</polymer-element>

<x-display>被放置在这样的页面上:

<div ng-controller="PeopleController">
    <h1>People</h1>
    <input ng-model="query" type="text">
    <x-display ng-repeat="p in people | filter:query" 
        title="{{ p.name }}" body="{{ p.body }}"></x-display>
</div>

这一切都很酷。除了一个异常(exception)，它的行为与您期望的完全相同，放置了一大堆 <x-display>标签，每个人一个，并用正确的值填充它们。我调用 Polymer默认值为 null，以便 {{ p.value }}事件不会闪现，但除此之外它很好很简单。

问题是嵌套的 XDisplayController永远不会被 Angularjs 解析，因此永远不会成为真正的 Controller 。如果我这样定义它:

function XDisplayController($scope) {
    $scope.text = "blah blah";
    console.log("this never gets printed");
}

遗憾的是，它没有受到影响。

我将如何让 angularjs 了解模板，理想情况下，我将如何使其继承父范围，以便它的行为就像被放置在页面上一样，就像被 angular 指令一样？

我怀疑这可能与 $compile 有关但我无法让它工作。

哦，我应该提一下 Polymer 有 lifecycle callbacks ，这可能是调用任何链接 angularjs 代码的合适位置。

编辑:我尝试了 CodeHater 的代码，将 element.contents() 更改为 element.context.impl 并得到以下错误:

An attempt was made to reference a Node in a context where it does not exist.

我认为这与 Shadow DOM 以及 polymer 创建的标签如何拥有自己的上下文有关。

Answer 1

不知道如何从Angular方面解决这个问题......

在 Polymer 元素中使用 Angular

目前，<polymer-element>是一个与 Angular 不同的世界。因为 Polymer 从第一个 <template> 创建 Shadow DOM在一个元素中，您看到的错误来自 Angular 的编译器没有找到 ng-controller在 Shadow DOM 中。它期望在全局上下文中解析和运行。 element.contents() 的解决方法看起来很有趣，但该调用不了解如何遍历 Shadow DOM AFAICT。

在 Polymer 中使用 Angular 的另一个问题是每个都有自己的(相似的)数据绑定(bind)和表达式语法。如果您尝试混合搭配，这将产生冲突。

更多信息:https://groups.google.com/d/topic/polymer-dev/s_wH7gaCQZ0/discussion

在 Angular 应用程序中使用 Polymer 元素

你应该能够创建一个 Polymer 元素，给它一个 API，发布一些属性，并在 Angular 应用程序中重用它们。相反(在 Polymer 元素中使用 Angular)比我提到的 Shadow DOM 问题更棘手。

我还没有尝试过，所以你可能会看到 polyfills 尝试做他们的事情时有些奇怪。 Polymer -> Angular 肯定会与原生 API 一起工作。

构建基于组件的应用程序

综上所述，如果我们开始构建基于组件的应用程序，一切都会变得很糟糕。您使用指令来使用 Angular 编写组件；用于编写 Web 组件的 polymer 。在外部 b/c 上和谐地使用它们，它们是整个应用程序的分隔构建 block 。因此，不要为标记部分编写 Controller ，而是编写组件!

这个回应的寓意:我会在Angular小组中询问他们何时希望支持Shadow DOM :)