jQueryはangularJsで動作しません

Question

jqueryプラグインを使用してテーブルの列のサイズを変更しようとしています。ここには説明があります：Resizable table columns with jQueryは、colResiazableの一部です。

<div id="searchTable"> 
    <div id="container" style="position: relative"> 

     <table id="normal" width="100%" border="0" cellpadding="0" 
      cellspacing="0" class="coverhidtable"> 
      <tr> 
       <th>header</th> 
       <th>header</th> 
       <th>header</th> 
      </tr> 
      <tr> 
       <td class="">cell</td> 

      </tr> 
      <tr> 
       <td class="">cell</td> 

      </tr> 
      <tr> 
       <td class="">cell</td> 

      </tr> 
     </table> 

    </div> 
</div> 

が、私はangularJsテーブルを使用する場合、それは動作を停止： このプラグインの作品は、標準のHTMLテーブルを聖霊降臨祭

<div id="searchTable"> 
    <div id="container" style="position:relative"> 
     <table id="normal" width="100%" border="0" cellpadding="0" 
      cellspacing="0" class=""> 


      <tr class="tableList-head" > 
      <th ng-hide="hd.hidden" ng-repeat="hd in conf.heads"> 
         {{hd.name}} 
        </th> 
      </tr> 


       <tr ng-repeat="data in conf.myData" > 
        <td ng-hide="d.hidden" ng-repeat="d in conf.heads"> 
         {{data[d.name]}}</span> 

        </td> 
       </tr> 

     </table> 

    </div> 
</div> 

angularJsテーブルは角ディレクティブです：

.directive('angTable',['$compile',function($compile) { 
          return { 
           restrict : 'E', 
           templateUrl : 'components/table/tableTemplate.html', 
           replace : true, 
           scope : { 
            conf : "=" 
           }, 
           controller : function($scope,$rootScope) { 

ここではディレクティブの宣言の中にjQuerypluginが動作するようにjQueryコードを追加しています：

$("#normal").colResizable({ 
    liveDrag:true, 
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging", 
    resizeMode:'fit' 
}); 

今、最初のテーブルでは動作しますが、2番目のテーブルでは動作しません。私はdomのangularJsの変更について何かを読んでいます。問題は、テーブルのidが「正常」であることを意味すると思いますが、角度が新しくて、修正方法がわかりませんそれ。 任意の提案は、このために

Answer 1

をいただければ幸いあなたが角度の前にjQueryライブラリを含める必要があり、あなたがDDOのlink関数内でそのコードを配置する必要があります：あなたはjqueryの必須を使用したい場合は

link:function(scope, el, attrs){ 
    $("#normal").colResizable({ 
     liveDrag:true, 
     gripInnerHtml:"<div class='grip'></div>", 
     draggingClass:"dragging", 
     resizeMode:'fit' 
    }); 
}