这个设置会有一些复杂性。
第一,角不知道如何以结合自定义元素,所以从内到角的聚合物成分等的结合:
<my-element foo="{{ bar }}">
将设置元件的FOO属性,它可以只是一个字符串,但不会使用Node.bind设置绑定到foo属性。这对于绑定复杂对象或者当您需要双向绑定时是个大问题。
我创建了一个指令,允许您在Angular中使用Node.bind,但它是用于Dart的。您可以将它移植到JS:https://github.com/google/angular_node_bind.dart
它通过捕获双方括号中的表达式并通过Node.bind设置监视表达式和绑定来工作。前面的示例将更改为:
<my-element foo="[[ bar ]]">
绑定是双向的。如果<my-element>
更改foo的值,bar的值将被更新。
第二个问题是依赖注入。由于浏览器负责创建自定义元素,Angular不知道它们何时创建,也没有机会注入依赖关系。所以你需要一个Polymer元素来获得一个Angular服务(或者任何服务对象,Angular或者没有)。
一旦你使用类似angular-node-bind的东西,你可以使用绑定将服务传递给元素。也许是这样的:
<my-element http-service="[[ $http ]]">
(由于我不是一个真正的角专家,我只是一直试图获得角和聚合物一起玩,我不是100%肯定$ HTTP才有效在表达式中)。
Angular团队曾表示他们打算在Angular 2.0中支持自定义元素,虽然他们的recent blog post没有提及它。
嗯...感谢贾斯汀从架构的角度来看是有道理的 - 需要弄清楚实现级别的细节:) 我发现聚合物层(读取Shadow DOM)到浏览器需要其他框架。简而言之,Polymer对象需要将事件(至少是本地的)发布到浏览器级别,这将由JS框架订阅。 – rahul