Add support for dash attributes

Fixes #18

Author: eee-c

angular_bind_polymer.js

@@ -8,10 +8,18 @@ directive('bindPolymer', ['$parse', function($parse) {
       var attrMap = {};
 
       for (var prop in $attr) {
+        var dash_prop = prop.
+          replace(/([a-z])([A-Z])/g, '$1-$2').
+          toLowerCase();
+
         if (angular.isString($attr[prop])) {
           var _match = $attr[prop].match(/\{\{\s*([\.\w]+)\s*\}\}/);
           if (_match) {
+            // console.log(prop + ': ' + _match[1])
             attrMap[prop] = $parse(_match[1]);
+            if (dash_prop != prop) {
+              attrMap[dash_prop] = $parse(_match[1]);
+            }
           }
         }
       }

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-bind-polymer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "authors": [
     "Chris Strom <[email protected]>"
   ],

test/BindingSpec.js

@@ -44,17 +44,42 @@ describe('Double binding', function(done){
   });
 });
 
+describe('Custom Elements with dash attributes', function(){
+  // Build in setup, check expectations in tests
+  var ngElement, polymerElement;
+
+  beforeEach(function(done){
+    // The angular element is the first child (the <pre> tag)
+    ngElement = container2.children[0];
+    polymerElement = container2.children[1];
+
+    polymerElement.setAttribute('in', '2');
+
+    // Must wait one event loop for ??? to do its thing
+    setTimeout(done, 0); // One event loop for Polymer to process
+  });
+
+  it('sees polymer update properly', function(){
+    expect(polymerElement.getAttribute('out-value')).toEqual('4');
+  });
+
+  // The actual test
+  it('sees values from polymer', function(){
+    expect(ngElement.innerHTML).toEqual('4');
+  });
+});
+
 describe('Double binding multiple polymer instances', function(done){
   // Build in setup, check expectations in tests
   var ngElementA, polymerElementA;
   var ngElementB, polymerElementB;
 
   beforeEach(function(done){
     // The angular element is the first child (the <pre> tag)
-    ngElementA =      container2.children[0];
-    polymerElementA = container2.children[1];
-    ngElementB =      container2.children[2];
-    polymerElementB = container2.children[3];
+    ngElementA =      container3.children[0];
+    polymerElementA = container3.children[1];
+    ngElementB =      container3.children[2];
+    polymerElementB = container3.children[3];
 
     polymerElementA.setAttribute('in', '2');
     polymerElementB.setAttribute('in', '4');

test/PolymerSetup.js

@@ -19,12 +19,18 @@ container.appendChild(container1);
 
 var container2 = document.createElement('div');
 container2.innerHTML =
-  '<pre ng-bind="answer2a"></pre>' +
-  '<x-double bind-polymer in="1" out="{{answer2a}}"></x-double>' +
-  '<pre ng-bind="answer2b"></pre>' +
-  '<x-double bind-polymer in="1" out="{{answer2b}}"></x-double>';
+  '<pre ng-bind="answer2"></pre>' +
+  '<x-double bind-polymer in="1" out-value="{{answer2}}"></x-double>';
 container.appendChild(container2);
 
+var container3 = document.createElement('div');
+container3.innerHTML =
+  '<pre ng-bind="answer3a"></pre>' +
+  '<x-double bind-polymer in="1" out="{{answer3a}}"></x-double>' +
+  '<pre ng-bind="answer3b"></pre>' +
+  '<x-double bind-polymer in="1" out="{{answer3b}}"></x-double>';
+container.appendChild(container3);
+
 var object_container = document.createElement('div');
 object_container.innerHTML =
   '<pre ng-bind="my.answer"></pre>' +

test/x-double.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<dom-module name="x-double" attributes="in out">
+<dom-module name="x-double" attributes="in out outValue">
   <template></template>
   <script>
     Polymer({
@@ -13,13 +13,18 @@
         out: {
           type: Number,
           reflectToAttribute: true
+        },
+        outValue: {
+          type: Number,
+          reflectToAttribute: true
         }
       },
       ready: function(){
         this.inChanged();
       },
       inChanged: function(){
         this.out = parseInt(this.in) * 2;
+        this.outValue = parseInt(this.in) * 2;
       }
     });
   </script>