Question

我最近开始在AngularJS和NodeJS中重写现有的PHP代码。简而言之，代码从api调用中获取所有工作人员，然后循环每个工作人员并进行另一个api调用以获取与该工作人员相关的所有约会。

后端API（以node和express编写）运行正常。我已对每个路径进行了手动检查，并从MySQL DB返回了正确的JSON数据。

这是我的控制器的Angular应用程序代码：

var calendar = angular.module('calendar', []);

function mainController($scope, $http) {

//Get staff
$http.get('/api/staff')
    .success(function(data) {
        $scope.staff = data;
        console.log(data);
    })
    .error(function(data) {
        console.log('Error: ' + data);
    }); 


    $scope.getApps = function($staff) {
        $http.get('/api/' + $staff + '/appointments')
            .success(function(data) {
                $scope.appointments = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            }); 


    } 

}

我的index.html：

<html ng-app="calendar">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

<title>Calendar</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="app.js"></script>

</head>

<body ng-controller="mainController">

<div class="staff_Col" ng-repeat="s in staff">

    <div class="staff_Header">  
        {{ s.FirstName }}
    </div>     

    {{ getApps(s.StaffID) }}

.......     

</div>

</body>
</html>

当页面加载时，调用所有工作人员然后使用ng-repeat循环，然后使用staffid调用getApps函数。

我遇到的问题是每次加载页面时都会导致浏览器终止。从我在控制台中观察到的内容，它为每个工作人员进行初始调用，然后再次循环回调，直到它冻结并占用浏览器。

我觉得这是我从PHP到Angular的知识差距，并且非常感谢一些指导。感谢任何帮助男女生！

Answer 1

每次$ digest进程都会被调用它将执行getApps函数它不会被强制staff更改，$ http返回promises并且可以很好地用于你的目的。在下面的代码更新中，staff.appointments将被创建，然后在请求解决后反映在视图中，您不需要从视图调用函数，除非您想要更新，但是应该使用设计的方法为它

JS

$http.get('/api/staff')
    .success(function(data) {
        $scope.staff = data;
        angular.forEach($scope.staff, function (staff) {
          $http.get('/api/' + staff.StaffID + '/appointments').then(function(response){
            staff.appointments = response.data
          })
        })
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

HTML

<div class="staff_Col" ng-repeat="s in staff">

    <div class="staff_Header">  
        {{ s.FirstName }}
    </div>     

    {{ s.appointments }}

.......     

</div>

Answer 2

每当$ scope.staff中的内容发生更改时，您都会为每个成员发出api请求。然后在每次请求之后你重写$ scope.appointments的值 - 那个很奇怪。

任何方式都可以尝试避免过多的api请求。例如，您可以创建一个api，它接收一组ID并一次返回所有数据。并且不要在重复内部执行，或者至少使用$ http cache：true。

从角度ng-repeat调用函数

2 个答案:

JS

HTML