角度 - 聚合物相互作用 [英] Angular - Polymer Interaction
问题描述
我打算在 AngularJS 中尝试一个项目，其中所有组件都将使用 Polymer 开发.现在在开始这个项目之前，我有几个疑问:
I am planning to try a project in AngularJS in which all the components will be developed using Polymer. Now before starting this project, I have couple of queries:
在使用 Angular 服务获取数据后，我是否可以更新 Polymer 组件数据模型(也可以通过 UI 更新)?如果是，那么如果可能的话，分享一个例子.
Can I update Polymer component data model (there by the UI too) after fetching data using Angular services? And if Yes, then if possible share an example.
我可以调用 Angular 服务来从 Polymer 组件内部获取数据吗?(比如说，我有一个用户控件作为 Polymer 组件，用于通过 Angular 服务针对 MongoDB 验证用户凭据)?
Can I call an Angular services for say, fetching data, from inside the Polymer component? (Say, I have a User Control as Polymer component for Validating user credential through Angular Services against MongoDB)?
如果可能，请分享一个例子.
Please share an example if possible.
推荐答案
这个设置会有一些复杂性.
There will be some complications with this setup.
首先是 Angular 不知道如何绑定到自定义元素，因此从 Angular 内部绑定到 Polymer 组件，例如:
The first is that Angular doesn't know how to bind to custom elements, so a binding from within Angular to a Polymer component like:
<my-element foo="{{ bar }}">
将设置元素的 foo 属性，该属性只能是字符串，但不会使用 Node.bind 设置与 foo 属性的绑定.对于绑定复杂的对象，或者当你想要双向绑定时，这是一个大问题.
will set the foo attribute of the element, which can only be a string, but won't use Node.bind to setup a binding to the foo property. This is a big problem for binding complex objects, or for when you want a two-way binding.
我创建了一个指令，允许您在 Angular 中使用 Node.bind，但它是用于 Dart 的.你可以将它移植到 JS:https://github.com/google/angular_node_bind.dart
I created a directive that allows you to use Node.bind from within Angular, but it's for Dart. You could port it to JS: https://github.com/google/angular_node_bind.dart
它通过捕获双方括号中的表达式并通过 Node.bind 设置监视表达式和绑定来工作.前面的示例将更改为:
It works by capturing expressions in double square-braces and setting up a watch expression and a binding via Node.bind. The previous example would change to:
<my-element foo="[[ bar ]]">
绑定是双向的.如果
The binding is two-way. If <my-element> changes the value of foo, the value of bar will be updated.
第二个问题是依赖注入.由于浏览器负责创建自定义元素，Angular 不知道它们何时被创建，也没有机会注入依赖项.因此，您需要一种让 Polymer 元素获取 Angular 服务(或任何服务对象，无论是否为 Angular)的方法.
The second issue is dependency injection. Since the browser is responsible for creating custom element, Angular doesn't know when they are created and doesn't have a chance to inject dependencies. So you need a way for a Polymer element to get a hold of an Angular service (or any service object really, Angular or not).
一旦您使用了 angular-node-bind 之类的东西，您就可以使用绑定将服务传递给元素.也许是这样的:
Once you're using something like angular-node-bind you could use bindings to pass the service to the element. Maybe like this:
<my-element http-service="[[ $http ]]">
(由于我不是真正的 Angular 专家，我只是试图让 Angular 和 Polymer 一起玩，我不能 100% 确定 $http 仅在表达式中可用).
(Since I'm not really an Angular expert, I've just been trying to get Angular and Polymer to play together, I'm not 100% sure that $http is just available in expressions).
Angular 团队表示他们打算在 Angular 2.0 中支持自定义元素，尽管他们的最近的博客文章 没有提及.
The Angular team has said that they intend to support custom elements in Angular 2.0, although their recent blog post doesn't mention it.
这篇关于角度 - 聚合物相互作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
