角 - 聚合物相互作用

Question

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

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

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

   如果可能,请分享一个例子.

Answer 1

这种设置会有一些复杂性.

第一个是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中的自定义元素,尽管他们最近的博客文章没有提到它.