2014-07-03 126 views
3

我已经看到了许多将Angular-JS示波器数据绑定到Polymer组件的答案。 (Use Angular-Bind-PolymerAnotherAnd a third)。看起来这不应该是这么难,如果聚合物组件真的只是DOM。 (请注意,我正在使用Chrome beta(36))。结合聚合物元素和角

我尝试了Angular-Bind-Polymer建议,但没有运气。我真正感兴趣的是将ngModel扩展到Polymer工作,这样我就可以使用Polymer复选框,单选按钮等。例如,我试图让纸复选框工作,所以我尝试了以下方法,认为它应该可以工作:

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

但没有。

然后我尝试使用角绑定聚合物将纸张复选框上的选中值绑定到模型属性,但没有任何成功。

我觉得如果我能弄清楚如何让其中一个窗体控件元素起作用,其他人就应该快速下手。有没有人有更好的想法如何做到这一点或解释为什么我写的指令没有被拿起并应用到纸张复选框?

回答

3

我做了这个通用的变通办法,用于观察复选框和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控制器,requites $范围。

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。

让我知道这是否适合你,快乐的编码!