Skip to content

Instantly share code, notes, and snippets.

@eseceve
Created July 17, 2014 01:45
Show Gist options
  • Save eseceve/d043dc3025210bd10ee3 to your computer and use it in GitHub Desktop.
Save eseceve/d043dc3025210bd10ee3 to your computer and use it in GitHub Desktop.
Directives for use ng-model with Polymer (control) elements: paper-input, paper-slider, paper-checkbox, paper-radio-group and paper-toggle-button
(function(angular, Polymer) {
angular.module('ng-papers-form', [])
.directive('paperCheckbox', ['$timeout', checkFactory])
.directive('paperToggleButton', ['$timeout', checkFactory])
.directive('paperInput', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
_linkFn($timeout, scope, element, ngModel, 'inputValue', 'input');
}
};
}])
.directive('paperRadioGroup', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (!attrs.valueattr) {
return;
}
_linkFn($timeout, scope, element, ngModel, 'selected', 'core-activate');
}
};
}])
.directive('paperSlider', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
$timeout(function() {
element.attr('value', ngModel.$modelValue || '');
});
element.on('change', function(e) {
ngModel.$setViewValue(e.target.ratio_);
});
scope.$on('$destroy', function() {
element.off('change');
});
}
};
}]);
function checkFactory($timeout) {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
_linkFn($timeout, scope, element, ngModel, 'checked', 'change');
}
};
}
function _linkFn($timeout, scope, element, ngModel, attr, evt) {
if (!ngModel) {
return;
}
$timeout(function() {
element.attr(attr, ngModel.$modelValue || '');
});
element.on(evt, function(e) {
ngModel.$setViewValue(e.target[attr + '_']);
});
scope.$on('$destroy', function() {
element.off(evt);
});
}
})(angular, Polymer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment