Javascript 如何将AngularJS变量绑定为全局变量？

我在角度控制器中有一个对象变量，具有一些属性。我想创建一系列聚合物元素，这些元素将该变量作为属性的名称，并根据类型和其他属性以特定格式显示它们。类似于下一个示例：

<polymer-element name="x-property" attributes="data property">
    <template>
        {{data.labels[property]}}: {{data[property]}}
    </template>
    <script>
        Polymer('x-property', {            
           data: {}
        });
    </script>
</polymer-element>

---

在第一个示例中，我是否可以使其正常工作？

因为属性只是字符串，所以此代码值[attr.nodeName]=attr.value；无法捕获对象值数据。相反，JavaScript将对象转换为字符串，这就是为什么会看到[object object]

使用mustaches{{}捕获对象是一种特殊的聚合功能，可以通过将属性发布为属性或将其列在原型的发布映射中来启用该功能

如果我们不是让应用程序全局通用，而是直接发布值和数据，那么我们可以让它像这样工作：

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

---

好吧我一直在玩弄你的例子。虽然作为{{person}我必须对我正在做的事情做一点改变，但这是AngularJs控制器的范围。我所做的唯一更改是在dataChanged事件中：dataChanged:function{this.values.data=JSON.parsethis.data；}Fwiw，如果您在应用程序globals原型中放入数据：{}，这会告诉Polymer您需要一个对象，Polymer将为您执行JSON.parse。嗯。。。我忘了。再次感谢：

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

<app-globals data="{{person}}"></app-globals>
<x-property property="firstName"></x-property>

:
{{person}}

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