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表是一个角度指令：

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

并且在指令的声明中我添加jQuery代码以使jQueryplugin工作：

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

现在，在第一个表中它起作用，而在第二个表中它不起作用。我读了一些有关angularJs修改dom的东西，我想问题应该是，我的意思是也许是id＆＃34; normal＆＃34;桌子没有被重新审视，但我是角色的新手，我不知道如何解决它。任何建议将不胜感激

Answer 1

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

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

jQuery没有＆＃39;使用angularJs

1 个答案: