CODEWITHSUNDEEP
angularjspolymer
ipaul
ipaul

Reputation: 374

Combining Polymer elements and angular

I have looked at a number of answers for binding Angular-JS scope data to Polymer components. (Use Angular-Bind-Polymer Another, And a third). It seems like this shouldn't be this hard, if the polymer components are truly just DOM. (Note that I'm using Chrome beta (36)).

I tried the Angular-Bind-Polymer suggestion, but no luck. My real interest is extending ngModel to work with Polymer so that I can use the Polymer check boxes, radio buttons, etc. For example, I tried getting paper-checkbox to work, so I tried the following, thinking that it should work:

var ngPaper = angular.module('ng-paper', []);

ngPaper.directive('paper-checkbox', function() {
  console.log("Processing directive");
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attr, ctrl) {
      console.log("Running linker");
      element.on('click', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(element[0].checked);
        });
      });

      ctrl.$render = function() {
        element[0].checked = ctrl.$viewValue;
      };

      ctrl.$isEmpty = function(value) {
        return value != true;
      };

      ctrl.$formatters.push(function(value) {
        return value === true;
      });

      ctrl.$parsers.push(function(value) {
        return value ? true : false;
      });
    }
  };
});

But no.

I then tried using angular-bind-polymer to bind the checked value on the paper-checkbox to a model attribute but didn't have any success.

I feel like if I could figure out how to get one of the form control elements to work, the others should fall quickly in line. Does anyone have a better idea on how to do this or an explanation as to why the directive I wrote isn't getting picked up and applied to the paper-checkbox?

Upvotes: 3

Views: 1408

Answers (1)

reicek
reicek

Reputation: 86

I made this generic work-around that I use to watch changes on check-boxes and most Polymer elements from AngularJS, it's really useful while you find a more proper way, I hope it helps you.

You can also use it to manipulate Polymer Elements (E.g. Toggle).

in your HTML:

<paper-radio-group selected="firstOption">
 <paper-radio-button label="First Option" id="firstOption" ng-click="change()"></paper-radio-button>
 <paper-radio-button label="Second Option" id="secondOption" ng-click="change()"></paper-radio-button>
</paper-radio-group>

In the corresponding AngularJS controller, requites $scope.

var firstOption= document.querySelector('paper-radio-button[id="firstOption"]');
var secondOption= document.querySelector('paper-radio-button[id="secondOption"]');
console.log(firstOption);
console.log(secondOption);
$scope.change = function()
{
 console.log(firstOption);
 console.log(secondOption);
}

This way every time the user changes the selection, AngularJS will get notified so it can query the changes, you can scope the data you get back to something more specific, this is particularly useful to toggle Polymer Elements from AngularJS.

Let me know if this works for you, happy coding!

Upvotes: 3

Related Questions