角 - 聚合物相互作用

时间:2014-03-19 12:27:49

标签: angularjs dart dart-polymer polymer angular-dart

我打算在AngularJS中尝试一个项目,其中所有组件都将使用Polymer开发。在开始这个项目之前,我有几个问题:

  1. 使用Angular服务获取数据后,我是否可以更新Polymer组件数据模型(也可以通过UI)?如果是,那么尽可能分享一个例子。

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

    请尽可能分享一个例子。

2 个答案:

答案 0 :(得分:6)

此设置会有一些复杂情况。

首先,Angular不知道如何绑定到自定义元素,因此从Angular内部绑定到Polymer组件,如:

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

(因为我不是一个Angular专家,我一直试图让Angular和Polymer一起玩,我不是100%肯定$ http只能在表达式中使用。)

Angular团队表示他们打算支持Angular 2.0中的自定义元素,尽管他们的recent blog post没有提到它。

答案 1 :(得分:4)

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

交叉绑定Angular和Polymer元素可能很诱人,但这是先进的,并非严格必要。我肯定会建议不要那样开始。