我在带有某些属性的Angular控制器中有一个对象变量。我想创建一系列聚合物元素,这些元素采用该变量作为属性的名称,并以特定格式显示它们(取决于类型和其他属性)。类似于下一个示例:
<polymer-element name="x-property" attributes="data property">
<template>
{{data.labels[property]}}: {{data[property]}}
</template>
<script>
Polymer('x-property', {
data: {}
});
</script>
</polymer-element>
然后我将其用作:
<x-property data="{{person}}" property="firstName"></x-property>
那很好。但是现在我要避免在所有元素中指定属性数据。阅读Polymer文档我发现可能有全局变量。我按照该示例创建了app-globals元素,如api指南中所示,但是当我尝试访问该属性时,我得到的是文本“ {{person}}”,而不是对象“ person”
<polymer-element name="app-globals" attributes="values">
<script>
(function () {
var values = {};
Polymer('app-globals', {
ready: function () {
this.values = values;
for (var i = 0; i < this.attributes.length; ++i) {
var attr = this.attributes[i];
values[attr.nodeName] = attr.value;
}
}
});
})();
</script>
</polymer-element>
<polymer-element name="x-property" attributes="property">
<template>
<app-globals id="globals" values="{{globals}}"></app-globals>
{{globals.data.labels[property]}}: {{globals.data[property]}}
{{globals.data}}
</template>
<script>
Polymer('x-property', {
});
</script>
</polymer-element>
所以在我的html中,我有:
<app-globals data="{{person}}"></app-globals>
<x-property property="firstName"></x-property>
我得到的结果就是这样:
:
{{person}}
无论如何,在第一个示例中,我可以完成这项工作吗?
最佳答案
因为属性只是字符串,所以此代码values[attr.nodeName] = attr.value;
无法捕获您的对象值数据。相反,JavaScript将您的对象转换为字符串,这就是为什么看到[Object object]
的原因。
使用胡须({{ }}
)捕获对象是一项特殊的Polymer功能,您可以通过将该属性发布为属性(或将其列出在原型的发布图中)来启用。
如果我们不是直接发布app-globals
,而是直接发布values
和data
,那么我们可以像下面这样使它工作:
<polymer-element name="app-globals" attributes="values data">
<script>
(function () {
var values = {};
Polymer('app-globals', {
created: function() {
this.values = values;
},
dataChanged: function() {
this.values.data = this.data;
}
});
})();
</script>
</polymer-element>
<polymer-element name="x-property" attributes="property">
<template>
<app-globals values="{{globals}}"></app-globals>
{{globals.data.labels[property]}}: {{globals.data[property]}}
{{globals.data | json}}
</template>
<script>
Polymer('x-property', {
json: function(s) {
return JSON.stringify(s);
}
});
</script>
</polymer-element>
您的原始代码没有
json
过滤器,但是否则我们再次要求Javascript将对象放在字符串上下文中,它将呈现[Object object]
。http://jsbin.com/vusayo/10/edit
关于javascript - 如何将AngularJS变量绑定(bind)为Polymer全局变量?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25486261/