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事件，该事件正被我的课程应用程序捕获。

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

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

Working example

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

1 个答案: