angularjs - 结合 polymer 元素和 Angular

Question

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

我尝试了 Angular-Bind-Polymer 建议，但没有成功。我真正的兴趣是将 n​​gModel 扩展到与 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 将 paper-checkbox 上的选中值绑定(bind)到模型属性，但没有成功。

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

Answer 1

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

您还可以使用它来操纵 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 Controller 中，需要 $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 元素特别有用。

请告诉我这是否适合您，编码愉快!