angularjs - Angular - polymer 相互作用

Question

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

在使用 Angular 服务获取数据后，我可以更新 Polymer 组件数据模型(UI 也有)吗？如果是，那么如果可能的话，分享一个例子。

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

如果可能，请分享一个例子。

Answer 1

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

首先是 Angular 不知道如何绑定(bind)到自定义元素，因此从 Angular 内部绑定(bind)到 Polymer 组件，例如:

<my-element foo="{{ bar }}">

将设置元素的 foo 属性，该属性只能是字符串，但不会使用 Node.bind 设置与 foo 属性的绑定(bind)。对于绑定(bind)复杂对象或需要双向绑定(bind)时，这是一个大问题。

我创建了一个指令，允许您在 Angular 中使用 Node.bind，但它是针对 Dart 的。您可以将其移植到 JS: https://github.com/google/angular_node_bind.dart

它通过捕获双方括号中的表达式并通过 Node.bind 设置监视表达式和绑定(bind)来工作。前面的示例将更改为:

<my-element foo="[[ bar ]]">

绑定(bind)是双向的。如果 <my-element>更改 foo 的值，将更新 bar 的值。

第二个问题是依赖注入(inject)。由于浏览器负责创建自定义元素，Angular 不知道它们何时创建，也没有机会注入(inject)依赖项。因此，您需要一种让 Polymer 元素获取 Angular 服务(或任何服务对象，无论是否为 Angular)的方法。

一旦你使用了 angular-node-bind 之类的东西，你就可以使用绑定(bind)将服务传递给元素。也许是这样的:

<my-element http-service="[[ $http ]]">

(由于我不是真正的 Angular 专家，我只是试图让 Angular 和 Polymer 一起玩，我不能 100% 确定 $http 仅在表达式中可用)。

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