浏览器因角度 $http 函数而挂起答案

【问题标题】：Browser hangs because of angular $http function浏览器因角度 $http 函数而挂起
【发布时间】：2016-09-07 19:54:23
【问题描述】：

这是我的代码。

<html>
<title>Doctor List</title>

<head>
    <link rel="stylesheet" type="text/css" href="css/DoctorStay.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
    <script type="text/javascript">
        var d = new Date();
        var weekday = new Array(7);
        weekday[0]=  "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var app=angular.module('DListApp',[]);
        app.controller('DListCtrl',function($scope,$http){

        $http({
            method : "POST",
            url : "http://localhost:81/DoctorStayServiceAngular/model/getDoctorList.php",
            params:{"city":"Surat","special":"Dentist","offset":"0","gender":"Any","fees":"Any","page":"10","state":"Gujarat","country":"IN"}
        }).then(function mySucces(response) {
            $scope.DoctorDeatil = response.data;
        }, function myError(response) {
            $scope.DoctorDeatil = response.statusText;
        });

        $scope.booking= function(docid,addid){
            //return addid;
            $http({
                    method: 'POST',
                    url: "http://localhost:81/DoctorStayServiceAngular/model/getDoctorBookingDetail.php",
                    //params:{"doctorid":docid,"addressid":addid,"day":weekday[d.getDay()]}
                    params:{"doctorid":docid}
                }).then(function mySucces(response) {
                    return response.data;
                });
        };

        });
    </script>
</head>
<body>
    <div class="ListMargin">
        <input type='hidden' id='current_page' />
        <input type='hidden' id='show_per_page' />
        <div class="row">
            <div class="row" id="header"></div>
            <div class="col-sm-3 AreaScroll" id="area"></div>
            <div class="col-sm-8 pagination-sm" ng-app="DListApp" ng-controller="DListCtrl">
                <div id="list"  ng-repeat="x in DoctorDeatil">
                    <div class="row DocList">
                        <div class="container">
                            <div id="DocImg" class="col-sm-2">

                            </div>
                            <div id="DocDetail" class="col-sm-4">
                                <div class="row">
                                    <a href="{{ x.profile_url}}">Dr. {{ x.fname}} {{ x.lname}}.</a>
                                </div>
                                <div class="row">
                                    {{ x.lname}}
                                </div>
                                <div class="row">
                                    {{ x.dredu}}
                                </div>
                                <div class="row">
                                    {{ x.drspec}}
                                </div>
                                <div class="row">
                                    <a href="{{ x.clinic_url}}"> {{ x.clinicname}}.</a>
                                </div>
                            </div>
                            <div id="DocAppoinment" class="col-sm-3">
                                {{booking(x.profileid,x.addressid)}}                                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- <div >


    </div> -->

</body>

在$scope.booking= function(docid,addid){} 函数中，当我使用$http 函数时，我的浏览器挂了这么多。这是我的 php 代码。

<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($_REQUEST['doctorid']); ?>

我没有做任何新的事情，那么我也面临问题。

编辑

我已经改变了这样的预订功能。

$scope.booking= function(docid,addid){
        i++;
        console.log(i);
        //console.log(addid);
        return addid;
        /*  $http({
                method: 'POST',
                url: "http://localhost:81/DoctorStayServiceAngular/model/getDoctorBookingDetail.php",
                //params:{"doctorid":docid,"addressid":addid,"day":weekday[d.getDay()]}
                params:{"doctorid":docid}
            }).then(function mySucces(response) {
                return response.data;
            });*/
    };

在控制台中我得到了这个 OP。

为什么我的预订功能执行了 2 次？控制台日志中应该只有 1 到 10 个。

【问题讨论】：

控制台说什么？
它挂得太厉害了，我没机会点击控制台。 :(
让控制台在请求开始前打开，按F12
你的浏览器是什么？
我已经在 Firefox 和 chrome 中检查了我的脚本。

标签： javascript php angularjs

【解决方案1】：

你能解释一下你为什么在 ng-repeat 中这样做：

<div id="DocAppoinment" class="col-sm-3">
{{booking(x.profileid,x.addressid)}}                                    
</div>

【讨论】：

首先我将从第一个 $http 函数获取医生列表并使用循环在 div 中设置这些详细信息，在循环中我将再次调用 $http 以获取医生的预订详细信息。
这很简单，为什么您要在 ng repeat 中调用另一个 $http 来获取医生的预订详细信息。而不是这个你应该做 ng-repeat="x in DoctorDeatil" 现在 DoctorDeatil 将是包含 DocAppoinment 数据的最终范围