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使用＆＃34;消化周期＆＃34;更新屏幕。所以，当jQuery做它的事情时，Angular并不了解它。

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

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

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

编辑：如果你得到了一个＆＃34;摘要已经在进行中＆＃34;错误消息，只需取出对$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项目玩得很开心。

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

1 个答案: