如何使用 ng-polymer-elements 解耦 2 向绑定？答案

【问题标题】：How to use ng-polymer-elements to have decoupled 2-way binding?如何使用 ng-polymer-elements 解耦 2 向绑定？
【发布时间】：2015-03-03 12:26:30
【问题描述】：

我正在查看 ng-polymer-element 的 implementation examples。也许我很困惑，但我试图找到一种以解耦方式绑定自定义 Polymer 元素的方法？这些仅适用于核心/纸张元素吗？我是不是找错树了？

如何进行“隔离范围”样式绑定？

如以下（实际上并不做2路绑定）：

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

但它出现空白。

【问题讨论】：

我有一个使用不同库的可行解决方案，但是，我仍然想看看结果如何。如果你很好奇，我得到了 github.com/eee-c/angular-bind-polymer angular-bind-polymer 以按描述工作（但你不能将它与核心或纸元素一起使用）。
所以，我想让 ng-polymer-elements 工作，因为不幸的是，angular-bind-polymer 仅适用于字符串！！！（由于 MutationObserver[attribute] 限制。
如果您的目标是使用 AngularJS 并进行材料设计，您是否尝试使用 material.angularjs.org/# ？
不，我们有复杂的、特定领域的自定义组件（想想数据可视化和科学模块）需要在项目之间共享。并不真正追求“任何设备”框架。

标签： angularjs binding scope polymer

【解决方案1】：

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

【讨论】：

【解决方案2】：

只要映射published 的属性，您就可以为任何元素定义新映射。有关如何定义新绑定的信息，请参阅文档末尾。在您的示例中（假设您发布“模型”），您将执行以下操作：

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

并使用组件：

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

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

【讨论】：

是的，{{ }} 是一个拼写错误，因为它是在 SO 表单中快速敲出来的。我已经能够使用具有已发布属性的 angular-bind-polymer ，但这仅限于字符串。 ng-polymer-elements 会绑定所有类型，因为它使用 PathObserver 而不是 MutationObserver？
啊，是的，似乎 ng-polymer-elements 取决于 Angular 版本 1.3x