javascript - jQuery 不能与 angularJs 一起使用

Question

我正在尝试使用 jquery 插件来调整表的列大小，这里有一个说明:Resizable table columns with jQuery ，是 colResiazable 的一部分。该插件可与标准 html 表格配合使用:

<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 表时它停止工作:

<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 表是一个 Angular 指令:

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

在指令的声明中，我添加了 jQuery 代码以使 jQuery 插件正常工作:

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

现在，在第一个表中它可以工作，而在第二个表中则不行。我读到了一些关于 angularJs 对 dom 的修改的内容，我想问题应该是这样的，我的意思是也许表的 id“正常”没有被检索到，但我是 Angular 的新手，我不知道如何修复它。任何建议将不胜感激

Answer 1

为此，您必须在 Angular 之前包含 jQuery 库，并且必须将该代码放入 DDO 的 link 函数中:

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