javascript - 如何在 Angularjs 中用户点击链接多次时禁用

Question

我在 An-click='VewItems(id)' 中使用 ViewItems() 函数来调用 Angularjs 中的 Controller 中的方法，但它似乎还不好，因为当用户单击更多时间从模型加载的图像时，它会得到我附加到 div 的图像或元素的数量与点击量一样多。

这是我的功能

 $scope.ViewItems = function ($id) {

        $('.modal-title').html('');
        $('#bookimg').html('');
        // Fetch an item from book list
        if($id) {

            id = $id;
            $http({
                method: 'GET',
                url: url+id,
            }).then(function successCallback(response) {
                var http_code = response.data.s_respond;
                $('<div id="loading"></div>').appendTo('body');
                if (http_code === 200) {

                    SetErrors(http_code, 'OK');
                    var book_items = JSON.parse(response.data.data);
                    $('<h3>'+book_items.title+'</h3>').appendTo('.modal-title');
                    $('<img src=" '+book_items.image+' " width="100%" />').appendTo('#bookimg');
                    $('#myModal').modal({backdrop: 'static', keyboard: false});
                } else {

                    SetErrors(http_code, 'warning');
                }
            }, function errorCallback(response) {
                SetErrors(http_code, response.textStatus);
            });
        }
    };

HTML

Answer 1

维护一个变量isClicked并相应地处理回调。

var isClicked = false;
$scope.ViewItems = function ($id) {
    if (isClicked) {
         return;
    }
    isClicked = !isClicked;

    ...

}