从 angular 指令中使用 jquery 不起作用答案

【问题标题】：Using jquery from angular directive does not work从 angular 指令中使用 jquery 不起作用
【发布时间】：2016-11-06 01:32:37
【问题描述】：

我正在尝试在 ng-repeat 内的元素上实现 jquery-ui 的可排序。

问题：我实际上无法对 ng-repeat 中的元素执行可排序操作。

我已经检查了答案。我的代码似乎与大多数显然有效的答案相似，但我的代码不起作用

下面是html sn-p:

<div class="container-fluid rt-widget-list-dim-adj">
    <div my-dir>
        <div ng-repeat="widget in model.widgets" ng-switch="widget.widgetType">
            <div ng-switch-when="HEADER">
                <ng-include src="'views/widget/widget-header.view.client.html'">
            </div>
            <div ng-switch-when="IMAGE">
                <ng-include src="'views/widget/widget-image.view.client.html'">
            </div>
            <div ng-switch-when="YOUTUBE">
                <ng-include src="'views/widget/widget-youtube.view.client.html'">
            </div>
        </div>
    </div>
</div>

我的 app.js：

(function(){
    angular.module("myApp", ['ngRoute', 'myDir']);
})();

下面是我的自定义指令：

(function () {
    angular
        .module("myApp", [])
        .directive("myDir", makeSortable);

    function makeSortable() {
        var directive = {
            restrict : 'ACE',
            link : linker
        };
        function linker(scope, element, attrb) {
            element.sortable();
        }
        return directive;
    }
})();

【问题讨论】：

您在 element.sortable() 上的“元素”可能不是 jquery 元素
不是 jquery 元素是什么意思？我假设由于 my-dir 是父目录，所以它的所有子目录都可以排序。
由于明显的原因它不起作用。 ng-include 模板是异步加载的。链接功能运行时，子元素还不存在。在当前状态下没有很好的方法来处理它。考虑为每个 ng-switch-when 案例创建指令并使用它们而不是 ng-include。

标签： javascript jquery angularjs jquery-ui jquery-ui-sortable

【解决方案1】：

链接器函数 args 中的元素不是 jQuery，它是一个 jqLite 包装器。如果你想应用 jQuery，试试这个：

$j(element[0]).sortable();

【讨论】：

这也不起作用。但是$(element).sortable(); 确实有效。还是谢谢。
取决于用于 jQuery 参考的内容：$、$j、jQuery。但是 $ 不是一个好习惯。
element 是 jQuery 元素。 angular.element === $ 加载 jQuery 时。