为什么我的视图不更新时，改变范围变量

Why does my view not update when changing scope variable?

本文关键字：改变 范围 变量 更新 我的 视图 为什么      更新时间：2023-09-26

导航栏(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文件的导航栏上创建一个搜索功能，当用户按下回车键时，我从使用该搜索和更新upcoming_games模板的外部API获得信息。现在，我知道我输入了"searchGame"函数，因为它记录到控制台，我知道我得到的数据是好的。但是，当我试图改变变量"$范围。Games = data.results;"，视图不更新。现在，如果我在upcoming_games_template.html中创建相同的搜索栏表单，它会完美地工作。

为什么会发生这种情况?我在main。html文件中声明了控制器，应该是一样的，对吧?

我也不认为在这种情况下我需要$scope.$apply()

谢谢。

可能您正在使用两个不同的控制器，因此您正在填充$作用域。控制器的游戏变量，而您将填充$作用域。另一个控制器的游戏变量。如果您提供一个文件，它可能会更简单。如果你想要一个快速的解决方案，你应该尝试使用$rootScope。在相同的rootscope变量上重复游戏变量:

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