我什么时候可以在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事件，该事件正被我的类应用程序捕获。

我的课堂应用程序是一组有空位的桌子。因此，我们的想法是，可以将用户的图标拖到类中的一个插槽中，然后我就可以处理剩下的内容。

我正在捕捉广播的事件fine，并在加载数据后调用$('.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);
}

Answer 1

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

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

工作示例。