Question

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

我尝试了Angular-Bind-Polymer的建议，但没有运气。我真正感兴趣的是扩展ngModel以使用Polymer，这样我就可以使用Polymer复选框，单选按钮等。例如，我尝试使用paper-checkbox工作，所以我尝试了以下操作，认为它应该可以工作：< / p>

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上的checked值绑定到模型属性，但没有任何成功。

我觉得如果我能弄清楚如何使其中一个表单控件元素起作用，那么其他表单应该快速排列。有没有人更好地了解如何做到这一点或解释为什么我写的指令没有被提取并应用于纸张复选框？

Answer 1

我制作了这个通用的解决方法，我用它来观察AngularJS上的复选框和大多数Polymer元素的变化，当你找到更合适的方式时它非常有用，我希望它可以帮助你。

您也可以使用它来操纵聚合物元素（例如Toggle）。

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特别有用。

让我知道这是否适合您，快乐编码！

结合聚合物元素和角度

1 个答案: