使用 angularjs 从视图中调用 $http.get 方法答案

【问题标题】：Calling $http.get method from view with angularjs使用 angularjs 从视图中调用 $http.get 方法
【发布时间】：2013-08-01 09:10:19
【问题描述】：

我正在尝试调用 $http.get 方法来加载页面内容（这是一个电子邮件地址列表）。

当我的页面加载时，它会不断调用 http.get 方法，而我只想调用一次以加载电子邮件地址，然后将其存储在范围变量中。

我的查看代码是

<h2>Members</h2>

<!--<div>{{getTeamMembers()}}</div>-->
<div ng-repeat="member in teamParticipants">
   <span> </span> <span>{{member}}</span>
</div>

我的控制器类是

Controllers.controller('FixedTeamController', function ($scope,$http,$location) {

$scope.addTeam = function() {
    $http.post('team', $scope.team).
    success(function(fixedTeam, status, headers, config) {
          //succcess
    }).
    error(function(fixedTeam, status, headers, config){
        console.debug("error");
    });
};

$scope.getTeamMembers = function(){

var teamUId = "12541254";

$http({method: 'GET', url: 'team/'+teamUId}).
success(function(data, status, headers, config) {
      var members = [];
      $(data.listOfMembers).each(function(id,partcipantEmail){
          $http({method: 'GET', url: 'users?email='+partcipantEmail}).
          success(function(participant, status, headers, config) {
              members.push("new member");
          })
      });
      $scope.teamParticipants = members;
}).
error(function(data, status, headers, config) {
      console.debug("error");
});

};

});

代码工作正常，但它不断调用 getTeamMembers() 函数，所以我的问题是我应该怎么做才能只调用一次函数。

Edit :: 添加了用于添加新团队成员的其他方法“addTeam”（它使用不同的视图）。通过从控制器内部调用函数部分解决了问题，但是当我加载 addTeam 视图时，$scope.getFixedTeam() 函数也被调用，我不想调用这个函数。我怎样才能做到这一点？问候，

【问题讨论】：

注释掉<div>{{getTeamMembers()}}</div>。看看会发生什么

标签： angularjs

【解决方案1】：

您将函数调用放在绑定中，这意味着它将在每个 apply-digest[1] 上执行。相反，在控制器中调用getTeamMembers，并在视图中使用teamParticipants 属性。

[1]：{{}} 是 Angular 中的双向绑定，如果您要绑定到一个函数，它必须每次都评估结果以确定它是否是新的东西。这意味着每次 AngularJS 检查脏状态时，它都会调用所有绑定中的所有函数。这可能会增加一个非常昂贵的周期，所以只有在必要时才应该这样做！

【讨论】：

嗨，非常感谢您抽出宝贵时间，添加功能有效，我添加了完整的控制器代码，所以当我导航到添加新团队视图时，它使用相同的控制器并自动调用该功能.我想避免在添加新团队视图时调用此函数。我该如何处理。感谢您的宝贵时间。
如果视图不同，它听起来应该是不同的控制器，但如果它绝对必须是同一个控制器，则需要某种if 语句来仅加载团队成员当他们需要的时候。顺便说一句，在您更新的代码中，我仍然在视图中看到函数调用，而不是在控制器中！

【解决方案2】：

不需要在html中调用getTeamMembers()

你可以在函数定义之后调用它。（在函数下面）

【讨论】：