2013-11-02 5 views
5

ポリマーを試し始めました。AngularJSと一緒に、1ページのアプリケーションで使用しようとしました。そこで私はpolymer-ui-componentspolymer-ui-sidebar-menupolymer-ui-pagesの2つを取り上げました。ユーザーがサイドバーからアイテムを選択するたびに、ページコンポーネントは同じインデックスのアイテムを表示する必要があります。ポリマーコンポーネントと角型コントローラを一緒に配線

これら2つのコンポーネントの配線方法は?

メニューからonclickイベントを使用しようとしましたが、これは期待どおりに機能しません。

おそらく、ポリマーについての有用な文書が、それぞれの文書に加えて存在するのでしょうか?

UPDATE:

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> 

はコントローラー:

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

angular.element(selector)作業にセレクタを取得するには、 angularの前にjqueryを、の前にpolymerを含める必要があります。

答えて

3

私は、Webコンポーネント(ポリマー要素)が角度指令に話すことができる方法を示すビデオを作った。そのビデオの角度のデータバインディング機能を使用してコンポーネントの属性をデータ・バインドhttp://www.youtube.com/watch?v=p1NpZ-0Op0w&list=PLRAVCSU_HVYu-zlRaqArF8Ytwz1jlMOIM&index=1

たとえば、あなた物事を働かせるために他の機能を使うことができるはずです。 <polymer-ui-sidebar-menu>ng-clickを追加しましたか?

+0

私のポストの数分後にあなたのビデオを見つけましたが、実際に私は 'タブ'が必要なので、私のアプリケーションのためにあなたの例を使用しようとしました... *悪いニュース*:ビデオと何も見た! *良いニュース*:私はあなたの対応するgithubリポジトリを見つけました。それ以来、私は物事を働かせようとしました...しかし、今まで。運がない。実際に私はあなたの好みの方法だと思われるので、 'tabs.html'のコメント付きポリマー版を使用していますか?現時点では、私の「タブの見出し」と下の白いボックスが表示されますが、タブは表示されません。また、私はgithubで問題を書いた。あなたが私を助けることができるなら、それは素晴らしいことでしょう!よろしくお願いいたします。 –

+1

最近のAPI変更でコードを更新しました。物事は再び働くはずです。最初の(コメント付き) ' 'は挿入ポイントを使用し、おそらくタブを行うための最良の方法です。 2番目の方法(コメント化されていない)はAngularバージョンと似ています。これが動画で強調表示される理由です。 – ebidel

関連する問題