Почему мой взгляд не обновляется при изменении переменной области видимости?

Question

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> 

Я пытаюсь создать функцию поиска на моей навигационной панели в моей главной .html, и когда пользователь нажимает клавишу ввода, я получаю информацию от внешнего API с помощью этого поиска и обновляю шаблон предстоящих_games. Теперь я знаю, что я вхожу в функцию «searchGame», потому что она регистрируется на консоли, и я знаю, что данные, которые я возвращаю, хороши. Но когда я пытаюсь изменить переменную «$ scope.games = data.results;», представление не обновляется. Теперь, если я создаю одну и ту же форму поиска в файле upcoming_games_template.html, он отлично работает.

Почему это происходит? Я объявляю контроллер в моем файле main.html, поэтому он должен работать одинаково, не так ли?

Я также не думаю, что мне нужно $ scope. $ Apply() в этой ситуации.

спасибо.

Answer 1

Возможно, вы используете два разных контроллера, поэтому вы заполняете переменную $ scope.games контроллера, в то время как вы заполняете переменную $ scope.games другого контроллера. Если вы предоставите jsfiddle, это может быть проще. Если вы хотите быстрое решение, вы должны попытаться использовать переменную $ а rootScope.games и повторить через ту же переменную rootscope:

<div class="row" ng-repeat="games in $root.games | chunkBy:3"> 
    <!-- Content --> 
</div> 

Это не лучшее решение, но оно должно работает.