実行jQueryの機能

Question

が、これはFIDDLE

私の最初の例である事は、私は私の角度のアプリにこの例を渡すしようとすると、それは

仕事doesntのですこれはagularで私の見解である：だから

    <table class="table table condensed drillDown"> 
        <thead> 
         <tr style="background-color: #E3E3E3"> 
          <th style="width: 5%"></th> 
          <th style="text-align: center">Categories</th> 
          <th style="text-align: center">LW $</th> 
          <th style="text-align: center">LW</th> 
          <th style="text-align: center">L4 W</th> 
          <th style="text-align: center">L13 W</th> 
          <th style="text-align: center">L52 W</th> 
         </tr> 
        </thead> 

        <tbody> 
         <tr ng-repeat="d in category" class="parent"> 
          <td ng-class="expand" style="cursor: pointer"></td> 
          <td>{{d.desc}}</td> 
          <td>{{d.LW$}}</td> 
          <td>{{d.LW}}</td> 
          <td>{{d.L4W}}</td> 
          <td>{{d.L13W}}</td> 
          <td>{{d.L52W}}</td> 
         </tr> 

         <tr ng-repeat="d in subcat" class="child"> 
          <td ng-class="expand" style="cursor: pointer"></td> 
          <td>{{d.desc}}</td> 
          <td>{{d.LW$}}</td> 
          <td>{{d.LW}}</td> 
          <td>{{d.L4W}}</td> 
          <td>{{d.L13W}}</td> 
          <td>{{d.L52W}}</td> 
         </tr> 
        </tbody> 
       </table> 

あなたが見ることができるように、私は私の親、子を呼び出し、クラス私は通常のHTMLの例でやってるのと同じ方法を展開するが、私はそれを動作させるカント

使用しているjqueryコードはフィドルですが、これはディレクティブを使用して行うことができますが、これを行う方法はわかりません。

いくつかの助けこれはあなたのjQueryの機能を実行しようとしているので、jQueryの機能がないときに、角度のバージョンでは、テーブルが存在しない角度Angular FIDDLE example

Answer 1

はい、指示があります。ディレクティブは、TDタグでドリルダウン属性に制限されている

https://jsfiddle.net/h90Luy3h/

：私はここディレクティブであなたのjQueryを使用した例を作成しました。私は、ディレクティブのフックのためにクラスの上で属性や要素を使用するファンです。なぜなら、識別が容易で、ディレクティブの名前で何をしているのかがはっきりと分かるからです。フックとしてのクラスは乱雑になる可能性があり、実際にはDOM識別子ではなくスタイルにのみ適用するべきですが、それは間違いなく個人的な好みです。

function drillDown() { 

var directive = { 
    restrict: 'A', 
    link: link 
}; 

return directive; 

function link(scope,element) { 

    var table = $('.categories-table'); 

    table.each(function() { 
     var $table = $(this); 
     $table.find('.parent').each(function(){ 
      if($(this).nextUntil('.parent', ".child").length > 0){ 
       $(this).children('td:first').html('+'); 
      } 
     }); 
     $table.find('.child').each(function(){ 
      if($(this).nextUntil('.child', ".grandson").length > 0){ 
       $(this).children('td:first').html('+'); 
      } 
     }); 

     var $childRows = $table.find('tbody tr').not('.parent').hide(); 
     $table.find('button.hide').click(function() { 
      $childRows.hide(); 

     }); 
    }); 
    element.on('click',function(){ 
     if($(this).parent().hasClass('parent') == true) 
     { 
      console.log("----Parent"); 
      if ($(this).text() == "+") 
       $(this).text("-") 
      else 
       $(this).text("+"); 

      $(this).parent().nextUntil('.parent', ".child").fadeToggle("slow", "linear"); 
      $(this).parent().nextUntil('.parent', ".grandson").hide("fast"); 
      $(this).parent().nextUntil('.parent', ".child").each(function(){ 

       if($(this).children('td:first').text() == '-') 
        $(this).children('td:first').text('+'); 
      }); 
     } 
     else if($(this).parent().hasClass('child') == true) 
     { 
      console.log("----Child"); 
      if ($(this).text() == "+") 
       $(this).text("-") 
      else 
       $(this).text("+"); 
      $(this).parent().nextUntil('.child', ".grandson").fadeToggle("slow", "linear"); 
     } 
    }); 
} 
} 

Answer 2

を使用して私の例である

いいだろうテーブルを変更することができます。

AngularはUIを構築する実際の方法とは異なるので、ディレクティブと角のライフサイクルについて読むことは役に立ちます。トピックに関する超便利なディスカッション："Thinking in AngularJS" if I have a jQuery background?

私は答えはあまりありませんが、ここには単なるコードスニペット以上のものが必要です。