ng-repeat 不显示项目

Question

我的 angular 应用程序中有一个奇怪的错误，我的 ng-repeat 中的数据没有显示，但如果我刷新页面并导航到我的主页，它会快速闪烁到视图中然后消失，我不知道为什么会这样，有人可以帮我吗？

提前致谢

appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {

$routeProvider

    // home page
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainController'
    })

    // characters page that will use the CharactersController
    .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'CharactersController'
    });

$locationProvider.html5Mode(true);

}]);

CharactersCtrl.js

angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {

$scope.init = function(){
    $scope.getCharacters();
}

$scope.getCharacters = function(){

    $.ajax({
        url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
        success:function(response){
            $scope.characters = response.data.results;
            console.log($scope.characters);
        },
        fail:function(){

        }
    });

}

$scope.init();

});

characters.js

<div>
<div class="text-center">
    <h1>Characters</h1>
</div>

<section id="character-section" class="row">

    <figure class="columns small-3" ng-repeat="hero in characters">
            <!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
        <figcaption>
            {{hero.name}}
        </figcaption>
    </figure>
</section>
</div>

index.html

<body ng-app="marvelApp">

    <!-- HEADER -->
    <header>
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
            </div>

            <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
            <ul class="nav navbar-nav">
                <li><a href="/characters">characters</a></li>
            </ul>
        </nav>
    </header>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <main ng-view ></main>

</body>

app.js

angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);

Answer 1

您正在使用 jQuery ajax。 Angular 在 Angular 范围之外修改时不会自动更新变量（在这种情况下，$scope.characters 使用 jquery ajax 修改）；

我建议您使用 angular 提供的 $http 服务拨打 ajax 电话。

但是如果你坚持使用jqueryajax，你可以把这段代码$scope.characters = response.data.results;换成

`$scope.$apply(function(){

})`

结果：

$scope.$apply(function(){
    $scope.characters = response.data.results;
})

ng-repeat 不显示项目

ng-repeat not displaying items

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-route