javascript - 具有 angularjs ng-click 的 polymer

Question

我正在尝试将 polymer 集成到我的 angularjs 项目中。我制作了一个非常简单的paper-dropdown-menu，我需要获取所选项目的值以将其传递到 Controller 中的函数中。我按照这个方法尝试了，没有结果

<template id="Demo" is="dom-bind">
        <paper-dropdown-menu name="simple-test">
            <paper-listbox class="dropdown-content" selected="0">
                <template is="dom-repeat" items="[[modes]]" as="view">
                    <paper-item data-ng-click="selectedMod(view)">[[view]]</paper-item>
                </template>
            </paper-listbox>
        </paper-dropdown-menu>
    </template>

<script>
    Demo.modes = [
        'First',
        'Second',
        'Third'
    ];

</script>

在 Controller 中我有这个功能

$scope.selectedMod = function(value) {
  console.log(value)
};

但是当我点击该项目时什么也没有发生。这样可以吗？

Answer 1

您的代码中可能缺少一些内容。首先，组件是在<dom-module>内创建的。标签。

其次，在 <script> </script> ，需要初始化Polymer 。这是 documentation 中的示例:

<dom-module id="element-name">

  <template>
    <style>
      /* CSS rules for your element */
    </style>

    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>

  <script>
    // element registration
    Polymer({
      is: "element-name",

      // add properties and methods on the element's prototype

      properties: {
        // declare properties for the element's public API
        greeting: {
          type: String,
          value: "Hello!"
        }
      }
    });
  </script>

</dom-module>

<小时/>

看起来您也是 binding data类型 Array 。您可以这样做:

<script>
Polymer({
      is: '<your-element-name>',
      properties: {
        modes: {
          type: Array,
          value = ['First', 'Second', 'Third']
       }
     }
})
</script>