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

Question

我有一个 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 事件，该事件被我的类应用程序捕获。

我的类(class)应用程序是一组带有插槽的表格。所以我们的想法是，您可以将用户的图标拖到类中的一个插槽中，然后我将从那里处理其余的事情。

我很好地捕获了广播事件，并在数据加载后调用 $('.userIcon').draggable() 。但我想我可能会说得太早了。我猜想数据加载和 DOM 更新之间存在轻微的延迟。

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

有人可以帮忙吗？

提前致谢!

编辑:这是我当前的 PlaceUsers Controller 代码:

/**
* 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);
 }

Answer 1

你做错了。不要观看自定义事件，而是创建在链接阶段调用图标上的 .draggable() 的指令。这样可以保证用户已经加载。有点像这样:

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

Working example .