如何将AngularJS变量绑定为一个Polymer全局变量

How to bind an AngularJS variable as a Polymer global?

本文关键字：一个 全局变量 Polymer AngularJS 变量 绑定      更新时间：2023-09-26

我在Angular控制器中有一个object变量，它带有一些属性。我想创建一系列聚合物元素，它们接受该变量和属性的名称，并以特定格式(取决于类型和其他属性)显示它们。类似下面的例子:

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

这很好。但现在我想避免在所有元素中指定属性数据。阅读聚合物文档，我看到有可能有全局变量。我按照示例创建了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]的原因。

带有胡须的捕获对象({{ }})是一个特殊的聚合物特性，您可以通过发布属性作为属性(或在原型中的发布映射中列出它)来启用。

如果我们直接发布values和data，而不是让app-globals通用，那么我们可以使它像这样工作:

<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

相关文章：