我什么时候可以在我的 AngularJS 应用程序中启用 JQueryUI 拖放功能？答案

【问题标题】：When can I enable JQueryUI drag-and-drop in my AngularJS app?我什么时候可以在我的 AngularJS 应用程序中启用 JQueryUI 拖放功能？
【发布时间】：2013-12-31 05:03:21
【问题描述】：

我有一个 AngularJS 应用程序，它是一个用户表。它是使用以下代码生成的：

<tr class="userRow" ng-repeat="user in users | orderBy:'last_name'">
    <td><div class="userIcon"><img src="{{user.user_icon}}" /></div></td>
    <td>{{user.user_id}}</td>
    <td>{{user.first_name}}</td>
    <td>{{user.last_name}}</td>
    <td>{{user.phone}}</td>
    <td>{{user.email}}</td>
</tr>

我的$scope.users 模型是异步加载的，因此在加载 DOM 后会稍微出现用户表。加载后，我使用$rootScope 并广播usersLoaded 事件，该事件被我的类应用程序捕获。

我的课程应用程序是一组带有插槽的表格。所以想法是，您可以将用户的图标拖到类中的一个槽中，我会从那里处理其余的。

我很好地捕捉到了广播事件，并在数据加载后调用$('.userIcon').draggable()。但我想我可能会打电话给它为时过早。我猜在数据加载和 DOM 更新之间会有一点延迟。

所以我想我是在问，在视图更新后，Angular 是否会触发一个单独的事件？我尝试收听'$viewContentLoaded'，但似乎没有触发。

谁能帮忙？

提前致谢！

编辑：这是我当前的 PlaceUsers 控制器代码：

/**
* Place users in groups
 */
 function PlaceUsers($scope, $http, $rootScope){
    $scope.classes = [
        {slots: [1,2,3,4,5,6,7,8,9]},
        {slots : [1,2,3,4,5,6,7,8,9]}
    ];

    $scope.addEvents = function(){
        console.log('adding events');
        $(".userIcon").draggable({
            cursor: 'crosshair',
            cursorAt: {top: 15, left:15},
            snap: '.slot', 
            snapMode: 'inner'
        });
        $(".slot").droppable({
            accept: ".userIcon",
            activeClass: 'ui-state-active',
            hoverClass: 'ui-state-hover'
        });
    }
    $scope.$on('usersLoaded', $scope.addEvents);
    $scope.$evalAsync('$viewContentLoaded', $scope.addEvents);
 }

【问题讨论】：

标签： javascript jquery jquery-ui angularjs drag-and-drop

【解决方案1】：

你做错了。与其观看自定义事件，不如创建在链接阶段在图标上调用.draggable() 的指令。这种方式保证用户已经加载。有点像这样：

.directive("userIcon", function () {
    function link (scope, el, attr) {
        el.draggable();
    }
    return {
        link: link,
        restrict: "C"
    }
});

Working example.

【讨论】：

再次感谢。我搞定了，这很有帮助！