默认情况下,我从部落冲突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中