범위 변수를 변경할 때 내보기가 업데이트되지 않는 이유는 무엇입니까?

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 파일에 저장하고 사용자가 Enter 키를 누르면 해당 검색을 사용하는 외부 API에서 정보를 가져 와서 upcoming_games 템플릿을 업데이트합니다. 이제 콘솔에 기록하기 때문에 "searchGame"함수를 입력하고 다시 얻은 데이터가 좋다는 것을 알았습니다. 그러나 "$ scope.games = data.results;"변수를 변경하려고하면보기가 업데이트되지 않습니다. upcoming_games_template.html 안에 동일한 검색 창 양식을 만들면 완벽하게 작동합니다.

왜 이런 일이 발생합니까? 내 main.html 파일에서 컨트롤러를 선언하고 있으므로 동일하게 작동해야합니다.

이 상황에서 $ scope. $ apply()도 필요하지 않다고 생각합니다.

감사합니다.

Answer 1

아마도 두 개의 다른 컨트롤러를 사용하고 있으므로 다른 컨트롤러의 $ scope.games 변수를 채우는 동안 컨트롤러의 $ scope.games 변수를 채우고있을 것입니다. jsfiddle을 제공하면 더 간단해질 수 있습니다. 이것은 더 나은 해결책이 아니다

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

하지만 일을해야 : 당신이 빠른 솔루션을 원하는 경우에 당신은 $의 rootScope.games 변수 사용하고 동일한 rootscope 변수를 통해 반복 시도해야합니다.