结合聚合物元素和角度答案

【问题标题】：Combining Polymer elements and angular结合聚合物元素和角度
【发布时间】：2014-07-03 04:14:56
【问题描述】：

我查看了许多将 Angular-JS 范围数据绑定到 Polymer 组件的答案。（Use Angular-Bind-Polymer Another，And a third）。如果聚合物成分真的只是 DOM，这似乎不应该这么难。（请注意，我使用的是 Chrome beta (36)）。

我尝试了 Angular-Bind-Polymer 建议，但没有成功。我真正的兴趣是扩展 ngModel 以使用 Polymer，以便我可以使用 Polymer 复选框、单选按钮等。例如，我尝试让 paper-checkbox 工作，所以我尝试了以下方法，认为它应该可以工作：

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;
      });
    }
  };
});

但是没有。

然后我尝试使用 angular-bind-polymer 将纸张复选框上的选中值绑定到模型属性，但没有任何成功。

我觉得如果我能弄清楚如何让其中一个表单控制元素工作，那么其他的应该很快就会排成一行。是否有人对如何执行此操作有更好的想法或解释为什么我写的指令没有被拾取并应用于纸质复选框？

【问题讨论】：

标签： angularjs polymer

【解决方案1】：

我做了这个通用的变通方法，我用它来观察复选框和来自 AngularJS 的大多数 Polymer 元素的变化，当你找到更合适的方法时它真的很有用，我希望它对你有所帮助。

您还可以使用它来操作聚合物元素（例如切换）。

在您的 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>

在对应的AngularJS控制器中，需要$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);
}

这样，每次用户更改选择时，AngularJS 都会收到通知，因此它可以查询更改，您可以将返回的数据范围限定为更具体的内容，这对于从 AngularJS 切换 Polymer Elements 尤其有用。

如果这对你有用，请告诉我，祝你编码愉快！

【讨论】：