2014-03-19 26 views
6

我打算在AngularJS中尝试一个项目,其中所有组件都将使用Polymer进行开发。从现在开始这个项目之前,我有几个疑问的:采用了棱角分明的服务中获取数据后角度 - 聚合物相互作用

  1. 我可以(通过用户界面也有)更新的聚合物组分的数据模型?如果是,那么尽可能分享一个例子。

  2. 我可以从Polymer组件内部调用Angular服务来获取数据吗? (比如说,我有一个用户控件作为Polymer组件,用于通过针对MongoDB的Angular Services验证用户凭证)?

    请分享一个例子,如果可能的话。

回答

6

这个设置会有一些复杂性。

第一,角不知道如何以结合自定义元素,所以从内到角的聚合物成分等的结合:

<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没有提及它。

+0

嗯...感谢贾斯汀从架构的角度来看是有道理的 - 需要弄清楚实现级别的细节:) 我发现聚合物层(读取Shadow DOM)到浏览器需要其他框架。简而言之,Polymer对象需要将事件(至少是本地的)发布到浏览器级别,这将由JS框架订阅。 – rahul

4

聚合物元素只是常规元素。如果你对它们设置属性,调用它们的方法,并且听取它们的事件,那么在其他框架或库中使用它们时不应该有任何复杂性。这完全是由设计。

交叉绑定角和聚合物元素可能是诱人的,但这是先进的,并非绝对必要的。我肯定会建议不要这样开始。