angularjs - 将 polymer 组件和 Angular Controller 连接在一起

Question

我刚刚开始尝试 polymer 并尝试在一个单页应用程序中将它与 AngularJS 一起使用。因此我拿起了两个polymer-ui-components : polymer-ui-sidebar-menu和 polymer-ui-pages .每次用户从侧边栏中选择一个项目时，页面组件都应显示其具有相同索引的项目...

但是如何连接这两个组件呢？

我尝试使用 onclick菜单中的事件，但这不能按预期工作。

也许有任何关于 的有用文件 polymer 在万维网上除了他们自己的文档？

更新:

HTML:

<polymer-ui-sidebar-menu label=Channels>
  <polymer-ui-menu-item ng-repeat="channel in channels"
    ng-click=select($index)
    label="{{ channel }}"
    icon=menu>
  </polymer-ui-menu-item>
</polymer-ui-sidebar-menu>
<polymer-ui-pages>
  <span ng-repeat="channel in channels">content: {{ channel }}</span>
</polymer-ui-pages>

Controller :

$scope.select = function (index) {
  angular.element("polymer-ui-sidebar-menu")[0].selected = idx;
  angular.element("polymer-ui-pages")[0].selected = idx;
};

获取 angular.element(selector) 中的选择器工作，你必须包括 jquery之前 angular和 polymer之前 jquery !

Answer 1

我制作了一个视频来演示 Web 组件(Polymer 元素)如何与 Angular 指令对话:http://www.youtube.com/watch?v=p1NpZ-0Op0w&list=PLRAVCSU_HVYu-zlRaqArF8Ytwz1jlMOIM&index=1

该视频中的示例使用 Angular 的数据绑定(bind)功能对组件的属性进行数据绑定(bind)，但您应该能够使用其他功能来使事情正常进行。您是否尝试过添加 ng-click在 <polymer-ui-sidebar-menu> ?