如何让 ng-click 函数在执行前等待 jQuery 脚本完成？答案

【问题标题】：How to make ng-click function wait for jQuery script to finish before executing?如何让 ng-click 函数在执行前等待 jQuery 脚本完成？
【发布时间】：2015-04-07 20:15:46
【问题描述】：

在对 Flickr 的 API 进行 REST 调用之前，我需要清除当前项目的 ul 列表，然后再用 20 个项目填充它。目前这些正在同时运行，这导致列表保留 0 个项目，尽管抓取了 20 个新项目。

REST 调用当前位于我的一项服务中。从我的搜索中，我找到了两种可能的解决方案，$timeout 和$viewContentLoaded，或者可能将它们组合成一个解决方案。但是，就我而言，我无法弄清楚如何实现它才能使其正常工作。

先执行脚本：

JQuery 代码：

$('#fav-tags-list').on('click', 'li', function() {

    $('#images-list').children('li').remove();
    $('#fav-tags-list li').removeClass('selected');
    $(this).addClass('selected');
});

ng-click (getImages) 调用的函数：

flickrApp.service('shared', function() {
    var imageGroup = [];

    return {
        getImages: function(tag) {

            if (tag === false) {
                var options = {
                    format: 'json',
                    tagmode: 'ANY'
                }
            }
            else {
                var options = {
                    format: 'json',
                    tags: tag,
                    tagmode: 'ANY'
                }
            }

            $.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', options, function(data) {

                $.each(data.items, function(i, image) {

                    imageGroup.push(data.items[i]);
                });
            });

            return imageGroup;
        }
    };
});

ng-click 的标记（去除属性）：

<ul id="fav-tags-list">
    <li ng-repeat="tag in tagsList" ng-bind="tag"
        ng-click="shared.getImages(tag)"></li>
</ul>

编辑：按照要求，这是我使用服务的方式：

flickrApp.controller('flickrCtrl', ['$scope', '$firebase', 'shared', function($scope, $firebase, shared) {

    $scope.shared = shared;

    //Get a set of images on pageload
    $scope.imageGroup = shared.getImages(false);

}]);

我什至不确定这就是我要在这里寻找的东西，所以我很感激一些指导。

【问题讨论】：

不要在 Angular 代码中使用 jquery ..使用 $http.get 或 $resource..这将为消化循环的运行造成瓶颈
完全忘记了 $http.get.. 将更改和更新问题。
服务中的代码错误..能否请您添加控制器代码..我想看看您是如何使用服务的..似乎服务没有返回任何承诺..
@pankajparkar 我已经从我的服务中删除了一些功能，但总的来说它按预期工作。使用 $http.get 时，我无法访问 API，它只会在各处抛出访问冲突错误，这就是为什么我不得不使用 $.getJSON 来实现我想要的。
那么您可能需要自己运行角度 $digest 循环。使用 $scope.$apply() 更新范围变量

标签： jquery angularjs timeout wait

【解决方案1】：

如果您试图在调用函数时进行延迟，您可以执行以下操作：

<html>
<button ng-click="do()"></button>
</html>

<script>

    $scope.do = function() {
        $timeout( function(){
             //your code here
        },10000, true );
    }
<script>

或更有效的方法是用 timeout() 包装它

【讨论】：