从角度 ng-repeat 调用函数答案

【问题标题】：Calling a function from angular ng-repeat从角度 ng-repeat 调用函数
【发布时间】：2014-07-02 22:02:49
【问题描述】：

我最近开始用 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 的知识差距，非常感谢一些指导。感谢您的帮助！

【问题讨论】：

标签： node.js angularjs api angularjs-ng-repeat

【解决方案1】：

每次调用 $digest 进程时，它都会执行 getApps 函数，它不会仅在 staff 更改时强制执行，$http 返回承诺，并且可以很好地用于您的目的。在您的代码的以下更新中，将创建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>

【讨论】：

感谢您的回复。离开 PHP 是非常尴尬的。这种语言的潜力是不可思议的，我只需要弄清楚数据是如何绑定和服务的。再次感谢！
没问题，如果您需要帮助，请跳转到 irc.freenode.org 上的#angularjs irc

【解决方案2】：

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

尽量避免过多的 api 请求。例如，您可以制作一个接收 ID 数组并立即返回所有数据的 api。并且不要在重复中这样做，或者至少使用 $http cache:true。

【讨论】：

我知道我可以使用包含所有数据的多维数组（我避免使用它，因为查询非常复杂）。我很好奇为什么，如果有 4 个工作人员并且 ng-repeat 循环 4 次，它怎么会陷入占用浏览器的无限循环调用。