Navbar(main.html):
<nav class="navbar navbar-dark bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container" ng-controller="UpComingGamesCtrl">
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<a class="navbar-brand" href="#/">VideoGame Releases</a>
<form ng-submit="searchGame()">
<input type="text" id="form1" class="form-control" ng-model="gameToSearch">
</form>
</div>
</div>
</nav>
控制器:
...
$scope.games = [];
$scope.searchGame = function () {
if ($scope.gameToSearch) {
console.log('entered with text');
getUpcomingGames.getGame($scope.gameToSearch).get({}, function (data) {
$scope.games = data.results;
});
}
}
upcoming_games_template.html:
<div class="row" ng-repeat="games in games | chunkBy:3">
<div class="col-md-4" ng-repeat="game in games">
<div class="card">
<div class="view overlay hm-white-slight card-image">
<img src="{{game.image.screen_url}}" class="img-fluid" alt="">
<a href="#/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<div class="card-block">
<h4 class="card-title">{{game.name}}</h4>
<p class="card-text">{{(game.original_release_date | limitTo: 10) || getFutureReleaseDate(game) }}</p>
<a href="#/" class="center-block btn btn-info waves-effect waves-light">Read more</a>
</div>
</div>
</div>
</div>
我正在尝试在我的main.html文件中的导航栏上创建搜索功能,当用户按下回车键时,我使用该搜索从外部API获取信息并更新coming_games模板。现在,我知道我输入了“searchGame”功能,因为它记录到控制台,我知道我得到的数据是好的。但是当我尝试更改变量“$ scope.games = data.results;”时,视图不会更新。 现在,如果我在coming_games_template.html中创建相同的搜索栏表单,那么它可以完美运行。
为什么会这样?我在main.html文件中声明控制器,所以它应该工作相同,对吧?
在这种情况下,我也认为我不需要$ scope。$ apply()。
谢谢。
答案 0 :(得分:1)
您可能正在使用两个不同的控制器,因此您需要填充控制器的$ scope.games变量,同时填充另一个控制器的$ scope.games变量。如果你提供一个jsfiddle,它可能会更简单。如果你想要一个快速的解决方案,你应该尝试使用$ rootScope.games变量并重复相同的rootscope变量:
<div class="row" ng-repeat="games in $root.games | chunkBy:3">
<!-- Content -->
</div>
这不是更好的解决方案,但它应该有效。