ng-repeat는 항목을 표시하지 않습니다.

내 앵글 응용 프로그램에 이상한 버그가 있습니다. ng-repeat의 데이터가 표시되지 않지만 페이지를 새로 고치고 내 홈페이지로 이동하면 화면이 빠르게 깜박이며 사라집니다. im 왜 이런 일이 일어나고 있는지 누군가가 나를 도울 수 있습니까? 사전에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>

당신은 jQuery를 아약스를 사용하는

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

출처

2016-06-29 jordan

을 app.js. Angular는 Angular 범위 외부에서 수정 된 경우 변수를 자동으로 업데이트하지 않습니다 (이 경우 $scope.characters은 jquery ajax를 사용하여 수정 됨).

나는 ajax 전화를 걸기 위해 각도로 제공되는 $http 서비스를 사용합니다.

하지만 JQuery와 아약스를 사용하여 주장하는 경우, 당신은

`$scope.$apply(function(){ 

})`

결과이 코드 $scope.characters = response.data.results;를 포장 할 수 있습니다

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

출처

2016-06-30 00:21:48 Adr

정말 고마워요! @Adr – jordan

도움이되기를 기쁘게 생각합니다! – Adr

ng-repeat는 항목을 표시하지 않습니다.

답변

관련 문제