2017-03-02 12 views
0

ツリービュー(http://alexsuleap.github.io/)のインスタンスを変更して、ページ上の他のデータがロードされた後、ノードが更新されるようにする必要があります。特に、アイコンはAngularJSのGlyphicons Halflingsフォントのglyphicon glyphicon-bellです。ベルツリーアイコンを使用してAngular Treeviewノードをカスタマイズする方法

私は単純にツリーノードのテキストを更新し、glyphicon glyphicon-bellクラスのスパンを追加することができると考えていましたが、これはもちろんテキストとしてレンダリングされます。

この場合、ツリーノードの先頭に「glyphicon glyphicon-bell」または「ベルアイコン」を表示するようにノードを変更する最も適切な方法は何でしょうか?

答えて

0

最後に、JQueryを使ってツリーノードのスパンを見つけ、その前に適切なクラスのスパンを追加することにしました。私はベリコンスパンを削除する関数も追加しました。

 $scope.addBellIconTo = function(treeNode) { 
      var bellIconSpans = $('#' + treeNode.nodeId).prev().find('#bellicon'); 
      if (bellIconSpans.length == 0) { 
       var titleNode = $('#' + treeNode.nodeId).prev().find('.node-name'); 
       titleNode.before("<span class='glyphicon glyphicon-bell' id='bellicon'></span>"); 
      } 
     } 

     $scope.removeBellIconFrom = function(treeNode) { 
      var bellIconSpans = $('#' + treeNode.nodeId).prev().find('#bellicon'); 
      while (bellIconSpans.length > 0) { 
       bellIconSpans[0].remove(); 
      } 
     } 
関連する問題