从另一个 Angular 控制器更新 ng-repeat

Update ng-repeat from another Angular controller

本文关键字：更新 ng-repeat 控制器 Angular 另一个      更新时间：2023-09-26

默认情况下，我从部落冲突API加载一个列表，该列表返回JSON响应。在我的第一个控制器（MainCtrl）中一切顺利。

然后，我添加了一个表单，通过 ID （ SearchCtrl ） 搜索氏族。

我可以获取表单传递的值，但现在我正在尝试更新我的 ng-repeat 指令中的列表 member in memberList 在 MainCtrl 中。

我用

谷歌搜索了很多次我的问题，但没有找到解决方案。我不想使用$rootScope .我相信还有另一种不那么肮脏的方式来实现我想要的。

这是我的HTML和Angular代码

.HTML： 

<form class="uk-form" name="searchClanform" ng-controller="SearchCtrl" novalidate>              
  <input type="text" name="idCLan" class="uk-form-width-medium"
    placeholder="Eg. PP8JC9RQ"
    ng-model="searchClanform.idClan"
    ng-pattern="/([A-Za-z0-9]){1,8}/"
    required>
  <button href="#" class="uk-button uk-button-primary"
    ng-disabled="searchClanform.$invalid"
    ng-click="getClanFromForm()">Rechercher <i class="uk-icon-search"></i></button>
</form>
<section class="uk-container uk-container-center" ng-controller="MainCtrl">
  <table class="uk-table uk-table-condensed uk-table-striped uk-table-hover">
    <tr ng-repeat="member in memberList">
      <td>
        {{member.name}}
      </td>
      <td>
        {{member.league.name | LeagueEnToFr}}
      </td>
      <td>
        {{member.expLevel}}
      </td>
      <td>
        {{member.trophies}}
      </td>
    </tr>
  </table>
</section>

AngularJS：

CocApp.service("CocAppServices", function($http) {
    this.getAllMembers = function(clanId, callback) {
        $http.get("clan/" + clanId).success(function(data) {
            console.log(data.memberList);
            //$scope.memberList = data.memberList;
            callback(data.memberList);
        });
    };
});
var MainCtrl = CocApp.controller("MainCtrl", function($scope, CocAppServices) {
    $scope.getAllMembers = function(clanId) {
        CocAppServices.getAllMembers(clanId,function(data) {
          $scope.memberList = data;
        });
    };
    $scope.getAllMembers("PP8JC9RQ");
});
var SearchCtrl = CocApp.controller("SearchCtrl", function($scope, CocAppServices) {     
    $scope.getClanFromForm = function(){
        console.log("Formulaire de recherche soumis !!");
        console.log($scope.searchClanform.idClan);
        /* Here I want to update my ng-repeat directive from MainCtrl */
    }
});

希望我的问题很清楚，问候。

通常 Angular 有观察程序，一旦范围更新，它就会自动触发摘要周期。这是 angular 的 2 路数据绑定的基础。

我不太清楚你的问题到底是什么，但这里有什么可以帮助你：

一旦 $scope.memberList 值发生更改，UI 就会更新。如果它不更新。您始终可以调用 $scope.apply（） 来手动触发摘要周期。

我认为您要做的是再次搜索新ID。所以我想你想要的评论所在的代码应该看起来像这样：

CocAppServices.getAllMembers(clanId,function(data) {
$scope.$parent.memberList = data;
        });

当然，这假设您将 searchCtrl 设置为 mainCtrl 的子项，对于这样的操作应该是这种情况。

或者更简单。 摆脱你的搜索控制器，把getClanFromForm函数放在mainCtrl中

相关文章：