Question

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

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

如下（实际上不进行双向绑定）：

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

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 个答案: