链接/编译聚合物或Web组件模板到Angularjs范围

我有一个组件（web组件），我在其中放置了一个角度控制器，如下所示：

<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>

不幸的是，它没有被触动

我如何让angularjs知道模板，理想情况下，我如何让它继承父作用域，使其行为完全像被angular指令放置在页面上一样

我怀疑这可能与此有关，但我无法让它发挥作用

哦，我应该提到Polymer有，这可能是调用任何链接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创建的标记如何具有自己的上下文有关。

我对polymer完全陌生，但我想请您尝试以下内容：

<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>

<x-display polymer-directive ng-repeat="p in people | filter:query" 
    title="{{ p.name }}" body="{{ p.body }}"></x-display>

---

不知道如何从角度解决这个问题

使用聚合物元件的内部棱角

目前，

是一个与Angular不同的世界。因为Polymer从元素中的第一个

创建阴影DOM，所以您看到的错误来自Angular的编译器没有在阴影DOM中找到

ng控制器。它需要在全局上下文中解析和运行。使用
element.contents（）
的变通方法看起来很有趣，但该调用不理解如何遍历到影子DOM AFAICT中

使用Angular inside Polymer的另一个窍门是，它们都有自己的（类似的）数据绑定和表达式语法。如果尝试混合和匹配，这将创建碰撞

有关这方面的更多信息：

在角形应用程序中使用聚合物元素

你应该能够创建一个聚合元素，给它一个API，发布一些属性，并在Angular应用程序中重用它们。相反（使用聚合物元素内部的角度）是我提到的阴影DOM问题的更复杂的b/c

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

构建基于组件的应用程序

综上所述，如果我们开始构建基于组件的应用程序，那么一切都会很顺利。您可以使用指令来使用Angular编写组件；用于编写web组件的聚合物。在外部b/c上和谐地使用它们——它们是整个应用程序的分割构建块。因此，与其为标记的各个部分编写控制器，不如编写组件


这个回答的寓意是：我会在Angular组中询问他们何时希望支持Shadow DOM:）
您是否从指令中创建了聚合物元素？否。在我的中，我的聚合物模板位于何处。所以你在第一个代码区域看到的是一个html组件导入，我用它来代替angular指令。这似乎是有意义的，因为每次制作一个模板时代码都会运行，但它不是很有效。我认为是元素.contents（）不正确。我还可以确认获取内部内容需要$timeout，尽管我认为这可能是由于polyfill。对于本机实现的web组件，行为可能会有所不同。我将element.contents（）更改为element.context.impl.innerHTML，现在正在评估XDisplayController（它打印到控制台，表明它已为每个x-display初始化）。不幸的是，ng绑定不起作用，没有任何数据绑定到标记的内容。
<x-display polymer-directive ng-repeat="p in people | filter:query" 
    title="{{ p.name }}" body="{{ p.body }}"></x-display>

app.directive('polymerDirective', function($compile, $timeout) {
    return {
        link : function(scope, element, attrs) {
            $compile(element.contents())(scope);

            /* if polymer dont render the template before 
               the directive is linked you can just delay 
               the compilation a bit */             
            $timeout(function(){
                $compile(element.contents())(scope);
            },1000);

        }
    };
});