jQuery 不适用于 angularJs答案

【问题标题】：jQuery doesn' t work with angularJsjQuery 不适用于 angularJs
【发布时间】：2016-10-16 05:20:25
【问题描述】：

我正在尝试使用 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'
});

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

【问题讨论】：

如果要使用jquery，必须在angular js文件之前包含。可能是在angular之前包含jquery lib。
@SSH 什么意思，我应该在哪里插入 jQuery 代码？

标签： javascript jquery angularjs

【解决方案1】：

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

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

【讨论】：

我已经为我的指令编译了，可以一样：