ivh-TreeView AngularJsラベル上でノードIDを取得

Question

AngularJsには新規です。角度Ivh_treeviewコンポーネントを使用してJSONデータからネストされたツリーを表示しました。ツリーが正しく読み込まれます。今、私はしたい

ラベル上のノードIDを取得します。試しには、関数呼び出しが動作しているかどうかを確認できるように警告ボックスを作ろうとしました。 Ivh-Treevieweにはチェックボックス機能しかありません。だから、カスタムテンプレート

nodeTpl: [ 
      '<div>', 
      '<span ivh-treeview-toggle>', 
      '<span ivh-treeview-twistie></span>', 
      '</span>', 
      '<span href="#here" class="ivh-treeview-node-label" ng-click="test()">', 
      '{{trvw.label(node)}}', 
      '</span>', 
      '<div ivh-treeview-children></div>', 
      '</div>' 
     ].join('\n') 

とコントローラ

this.test = function() { 
alert("hello"); 

}

になりましたBtイマイチ呼び出さクリックイベントを追加しようとしました。これを解決してください。また、$ scope.testの定義を使ってやってみたところ、うまくいきませんでした。

Answer 1

あなたの問題は、ivh-treeview（v1）が、トランスクリプトのスコープをノード・テンプレートで使用できないという事実にあります。基本的に、これは、ツリー外のスコープで定義されたものがテンプレートによってアクセスできないことを意味します。すべてが失われていません！あなたはカップルのオプションがあります。

1. はきちんとディレクティブでクリックロジックまでにごを包みます。たとえば：

   ここ

   ... 
   '<span href="#here" class="ivh-treeview-node-label" do-fancy-things-on-click>', 
   ... 
   

、do-fancy-things-on-clickは、$scopeにnodeを検査し、何らかのアクションをとる、クリックイベントをリッスンあなたが定義したディレクティブです。接続された要素の表示を更新したり、イベントをブロードキャストしたり、サービスと対話したりすることができます。

2. ivh-treeviewのv2ブランチを使用します。これはまだ完全にはリリースされていませんが、テンプレートに継ぎ目のないスコープを提供することは、今後も引き続きサポートするつもりです。私はtranscluded inline templateを使用することをお勧めします。

v2がまだ完全に削除されていない理由は、私たちが変更を行っていないためです。私はあまりにも狂った何かを期待していないだろうが、最初のオプションがあなたのために働くなら、それは確かに動作し続けます。