angularjs: показать контейнер только после возврата $ resource.query

Question

Я начал использовать angularjs в своем приложении, и я столкнулся с проблемой, когда динамически загружаю результаты сервера. У меня есть ресурс:

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

И я использую его, когда ссылка cliked:

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

EDIT: Если вы получаете «переварить уже идет» сообщение об ошибке, просто вынуть вызов до $scope.$apply() и присвоить результат сервера tag.machines.

EDIT # 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.