AngularJS和Polymer双向绑定支持

文章目录
  1. 1. 安装
  2. 2. 使用

项目地址: https://github.com/GabiAxel/ng-polymer-elements

Web组件使编写封装的视图片段和独立于任何框架的逻辑成为可能. 目前支持核心元素(core)和paper元素.

例如, 下面的代码把<paper-input>元素的inputValue属性和Angular作用域的myText属性进行双向绑定

1
<paper-input ng-model="myText"></paper-input>

安装

ng-polymer-elements 可以通过 bower 安装:

1
bower install ng-polymer-elements

使用

添加脚本到HTML页面

1
<script type="text/javascript" src="ng-polymer-elements.js">

注意:

ng-polymer-elements 要求在启动Angular应用之前加载完成. 如果使用自动启动形式, 比如 <html ng-app="myModule">,
ng-polymer-elements 会自动处理. 如果是手动启动需要保证在 polymer-ready 事件之后执行.

1
window.addEventListener('polymer-ready', function() {
    angular.bootstrap(wrap(document), ['myModule']);
});

添加ng-polymer-elements模块作为angular应用程序依赖模块

1
angular.module('myModule', ['ng-polymer-elements']);

下面的组件通过ng-model支持简单值的双向绑定:

对于 core-list, ng-model用于绑定列表数据, ng-tap用于绑定tap事件, 同时把事件$event暴露出来.

1
<core-list ng-model="arrayData" ng-tap="onTap($event)">
    <template>
        <div>{{text}}</div>
    </template>
</core-list>
$scope.arrayData = [{text: 'one'}, {text: 'two'}, {text: 'three'}];
$scope.onTap = function(event) {
    var tappedItem = event.details.data;
};