将Polymer或Web Components模板链接编译为Angularjs Scope

概述我有一个 Polymer组件(Web组件),我在其中放置了一个角度控制器,如下所示： <polymer-element name="x-display" attributes="title body"> <template> <h2>{{title}}</h2> <p>{{body}}</p> <p ng-controller="XDisplayController @H_403_2@ 我有一个 Polymer组件(Web组件),我在其中放置了一个角度控制器,如下所示：

<polymer-element name="x-display"  attributes="Title body">  <template>    <h2>{{Title}}</h2>    <p>{{body}}</p>    <p ng-controller="XdisplayController" ng-bind="text"></p>  </template>  <script>    polymer('x-display',{      Title: "",body: ""    });  </script></polymer-element>

< x-display>正在这样放在页面上：

<div ng-controller="PeopleController">    <h1>People</h1>    <input ng-model="query" type="text">    <x-display ng-repeat="p in people | filter:query"         title="{{ p.name }}" body="{{ p.body }}"></x-display></div>

这一切都很酷.除了一个例外,它的行为与您期望的完全相同,放置了一大堆< x-display>标签,每个人一个,并用正确的值填充它们.我调用polymer默认值为null,这样{{p.value}}次出现不会闪现,但除此之外它很简单.

问题是嵌套的XdisplayController永远不会被AngularJs解析,因此永远不会变成真正的控制器.如果我这样定义它：

function XdisplayController($scope) {    $scope.text = "blah blah";    console.log("this never gets printed");}

遗憾的是,它没有受到影响.

我将如何使angularJs知道模板,理想情况下我将如何使其继承父作用域,使其表现得与放置在页面上的行为完全一样,就像使用angular指令一样？

我怀疑这可能与$compile有关,但我无法让它发挥作用.

哦,我应该提到polymer有lifecycle callbacks,它可能是调用任何链接angularJs代码的合适位置.

编辑：我尝试了CodeHater的代码,将element.contents()更改为element.context.impl,并收到以下错误：

An attempt was made to reference a Node in a context where it does not exist.

我认为这与Shadow DOM以及聚合物创建的标签如何具有自己的上下文有关.

解决方法 不知道如何从Angular方面解决这个问题……

在polymer元素中使用Angular

此时,<聚合物元素>是一个与Angular分开的世界.因为polymer从第一个< template>创建了Shadow DOM.在元素中,您看到的错误来自Angular的编译器,而不是在Shadow DOM中找到ng-controller.它期望在全球范围内解析和运行. element.contents()的解决方法看起来很有趣,但该调用无法理解如何遍历Shadow DOM AFAICT.

使用Angular insIDe polymer的另一个问题是每个都有自己的(相似的)数据绑定和表达式语法.如果您尝试混合匹配,这将产生冲突.

更多相关信息：https://groups.google.com/d/topic/polymer-dev/s_wH7gaCQZ0/discussion

在Angular应用程序中使用polymer元素

您应该能够创建polymer元素,为其提供API,发布一些属性,并在Angular应用程序中重用它们.反过来(在polymer元素中使用Angular)是我提到的Shadow DOM问题的棘手b / c.

我没试过这个,所以你可能会看到polyfills试图做他们的事情时有些奇怪.聚合物 – > Angular肯定会使用本机API.

构建基于组件的应用

所有这一切都说,如果我们开始构建基于组件的应用程序,一切都将是笨拙的.您使用指令使用Angular编写组件; polymer写入Web组件.在外面和它们和谐地使用它们它们是整个应用程序的分隔构建块.因此,不要为标记部分编写控制器,而是编写组件！

这个回应的道德：我会在Angular小组中询问他们希望支持Shadow DOM 总结

以上是内存溢出为你收集整理的将Polymer或Web Components模板链接/编译为Angularjs Scope全部内容，希望文章能够帮你解决将Polymer或Web Components模板链接/编译为Angularjs Scope所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。