angularjs：仅在返回 $resource.query 结果后显示容器

Question

我开始在我的应用程序中使用 angularjs，但在动态加载服务器结果时遇到了问题。 我有一个资源：

var GroupingTagMachines = $resource('/grouping_tags/:grouping_tag_id/machines', { format: 'json' }, 
                                      { 
                                        query: { method: 'get', cache: true, isArray: true }
                                      });

点击链接时我会使用它：

HTML：

<a href data-ng-click="show($event, tag)">click me</a>

JS：

scope.show = function($event, tag) {
    var clicked_link = $($event.currentTarget);
    var tags_list = clicked_link.parent(".grouping-tag").find(".tag-machines");

    if(tags_list.is(":visible")) {
      tags_list.slideUp();
    } else {
      GroupingTagMachines.query({ "grouping_tag_id": tag.id }, function(tag_machines) {
        tag.machines = tag_machines;
        console.log(tag.machines.length + " machines returned");
        tags_list.slideDown();
      });
    }
  };

现在单击链接时，将显示容器 div（带有向下滑动动画），然后结果出现在里面。 如您所见，我在资源回调方法中使容器可见，因此服务器应该之前响应。

所需的行为是仅在容器可见后才显示的结果。

有什么建议吗？

Answer 1

看起来问题与同时使用 jQuery 和 Angular 有关。简而言之，Angular 使用“摘要循环”来更新屏幕。所以当 jQuery 做这件事时，Angular 并不知道它。

slideDown() 函数有两个参数。第一个是幻灯片动画的持续时间，第二个是动画完成时可以执行的回调。

尝试使用该回调来更新来自服务器的结果的屏幕：

// 400 ms seems to be the default
tags_list.slideDown(400, function() {
  $scope.$apply(function() {
      tag.machines = tag_machines;
    });
});

编辑：如果您收到“digest is already in progress”错误消息，只需调用$scope.$apply() 并将服务器结果分配给tag.machines。

编辑 #2： 看起来我的交互错误 b/c 我正在扩展容器，然后添加项目。先添加项目再展开，可以使用$timeout服务：

tag.machines = tag_machines;
// don't forget to inject $timeout into your controller
$timeout(function() { tags_list.slideDown() });

这应该会将幻灯片效果延迟到下一个摘要周期。但是，我认为仅通过将项目添加到容器中，容器就会增长，然后最终发挥向下滑动的效果。您可能需要一些额外的 CSS 才能使其正确。

另外，如果你放弃 jQuery 并在 Angular 中完成这一切，这些问题就会开始消失。我在使用Angular Motion 项目时玩得很开心。