角 - 聚合物的相互作用 [英] Angular - Polymer Interaction

问题描述

我打算尝试一个项目中，所有的组件将采用高分子开发AngularJS。从现在开始这个项目之前，我有几个疑问的：

1. 我可以更新组件的聚合物使用数据服务的角度读取数据后（由UI也有）的模式？而如果是的，则如果可能共享一个例子




2. 我可以呼吁说，一个角服务，获取数据，从聚合物组件内部？ （说，我通过对MongoDB的角度验证服务用户凭据用户控件作为聚合物成分）？

   请分享如果可能的例子。

解决方案

有会出现一些并发症，与此设置。

第一，角度不知道如何绑定到自定义元素，所以从内部角度到聚合物组分样结合：

＆LT;我的元富={{栏}}＆GT;


将设置元素，这只能是一个字符串，但不会Node.bind使用设置绑定到foo的财产的富属性。当希望一个双向绑定这是结合复合物，或为一个大问题。

我创建了一个指令，让您使用Node.bind从内部角，但它的飞镖。您可以将其移植到JS：<一href=\"https://github.com/google/angular_node_bind.dart\">https://github.com/google/angular_node_bind.dart

它通过双方括号捕获前pressions和设置手表前pression并通过Node.bind绑定。在previous例子将改变为：

＆LT;我的元富=[[巴]＆GT;


的结合是双向的。如果＆LT;我-组件＆gt; 改变foo的值，条的值将被更新。

第二个问题就是依赖注入。因为浏览器是负责创建自定义元素，角不知道他们什么时候被创建，不会有机会注入依赖。所以，你需要一个聚合物元件的方式得到一个角度服务的保持（或任何服务对象真的，角与否）。

在你使用像角节点绑定的东西你可以用绑定到服务传递给元素。也许是这样的：

＆LT;我的元素HTTP的服务=[[$ HTTP]＆GT;


（由于我不是一个真正的角专家，我只是一直试图让角和聚合物一起玩，我不是100％肯定$ HTTP是刚刚在离pressions可用）。

该角的团队已经表示，他们打算支持角2.0自定义元素，虽然他们的最近的一篇博客没有提到它。

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:

1. 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.

2. 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.

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

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.

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

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.

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).

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

(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).

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屋！