如何使用 ng-polymer-elements 解耦 2-way 绑定？

Question

我正在查看 implementation examples 中的 ng-polymer-element。也许我很困惑，但我正在尝试找到一种以解耦方式双向绑定自定义 Polymer 元素的方法？这些只适用于 core/paper 元素吗？我是不是找错树了？

如何进行 "isolated scope" 样式绑定？

例如下面的（实际上并没有做双向绑定）：

<some-input ng-model="someCtrl.testModel.name"></some-input>

<!-- then in the custom element -->

<polymer-element name="some-input">
    <template>
        <input id="inputField" type="text" model="{{HOW-TO-GET-THE-NG-MODEL???}}" on-click="{{setFocus}}"> 
    </template>
    <script type="application/javascript" src="some-input.js"></script>
</polymer-element>

更新：

根据 constants mappings 似乎有一个默认的 ngModel 绑定到值（从自定义元素可以看出）...我无法从输入内部访问它... ..

那么我将如何绑定到值？我试过了

 <some-input ng-model="workbenchCtrl.testModel.name"></some-input>

<!-- inside custom element -->
<input id="inputField" type="text" model="{{value}}" on-click="{{setFocus}}">

但它是空白的。

Answer 1

您可以为任何元素定义新的映射，只要您映射 published 的属性即可。有关如何定义新绑定的信息，请参阅文档末尾。在你的例子中（假设你发布 "model"）你会做这样的事情：

angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
  someInput: {
    ngModel: {
     primitive: 'model'
    }
 }
});

并使用组件：

<some-input ng-model="someCtrl.testModel.name"></some-input>

请注意，您不使用 {{ }} 进行双向绑定。

Answer 2

    * npm install -g yo
    * npm install generator-polymer -g
    * mkdir ng-polymer-test  && cd $_
    * yo polymer
    * npm install  grunt
    * npm install grunt-contrib-watch
    * npm install grunt-replace
    * bower install angular
    * bower install ng-polymer-elements
    * yo polymer:element m-test
    * subl app/index.html

<!doctype html>
<html lang="" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>poly foo</title>
  <link rel="stylesheet" href="styles/main.css">
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/ng-polymer-elements/ng-polymer-elements.js"></script>
  <link rel="import" href="bower_components/paper-input/paper-input.html">


  <link rel="import" href="elements/elements.html">
  <link rel="import" href="elements/m-test/m-test.html">
</head>

<body unresolved fullbleed layout vertical>
  <div  ng-controller="myCtrl">
  <input ng-model="firstname" type="text">
  <paper-input ng-model="firstname"></paper-input>

  <h1>Hello {{ firstname }}</h1>
   <m-test ng-model="firstname" ng-click="myClick()"></m-test>

  </div>
</body>

<script>


var app = angular.module('myApp', ['ng-polymer-elements']);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.addresses = [{
       "number":"3",
       "street":"main",
    }];

    $scope.myClick = function(event) { alert('Hello'); }; 

});

angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
   mTest: {
      ngModel: {
         primitive: 'firstname'
      },
      ngClick: {
         event: 'someEvent'
      }

   }
});

</script>

</html>

     * subl app/elements/m-test/m-test.html

    <link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="m-test" attributes="">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    Hello from m-test  {{firstname}}
    <br>

    <br>
    <input type="checkbox" name="c2" value="c2" id="c2" onchange="myonchange()" >
  </template>
  <script>
    (function () {
      Polymer({
        myonchange:function(){
           this.asyncFire("someEvent",{});
        },
      });
    })();
  </script>
</polymer-element>

如何使用 ng-polymer-elements 解耦 2-way 绑定？

How to use ng-polymer-elements to have decoupled 2-way binding?

binding

scope

angularjs

polymer