将Polymer或Web Components模板链接/编译为Angularjs Scope

Question

我有一个Polymer组件(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>

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

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

问题是XDisplayControllerAngularjs解析嵌套的永不得到,因此永远不会成为真正的控制器.如果我这样定义它:

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

遗憾的是,它没有受到影响.

我将如何使angularjs知道模板,理想情况下我将如何使它继承父作用域,使其表现得像放置在页面上一样,就像使用angular指令一样？

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

哦,我应该提一下,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以及聚合物创建的标签如何具有自己的上下文有关.

Answer 1

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

在Polymer元素中使用Angular

目前,<polymer-element>与Angular的世界是一个独立的世界.因为Polymer从<template>元素中的第一个创建Shadow DOM ,所以您看到的错误来自Angular的编译器,而不是ng-controller在Shadow DOM中找到它.它期望在全球范围内解析和运行.element.contents()看似有趣的解决方法,但该调用不了解如何遍历Shadow DOM AFAICT.

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

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

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

您应该能够创建一个Polymer元素,为其提供API,发布一些属性,并在Angular应用程序中重用它们.反过来(在Polymer元素中使用Angular)是我提到的Shadow DOM问题的棘手b/c.

我没试过这个,所以你可能会看到polyfills试图做他们的事情有些奇怪.Polymer - > Angular肯定会使用本机API.

构建基于组件的应用

所有这一切都说,如果我们开始构建基于组件的应用程序,一切都将是笨拙的.您使用指令使用Angular编写组件; Polymer写入Web组件.在外面和它们和谐地使用它们它们是整个应用程序的分隔构建块.因此,不要为标记部分编写控制器,而是编写组件!

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