ng-repeat работает в одном приложении, но не в другом

Question

ng-repeat работает в одном приложении, но не в другом

0

Поэтому я работал над двумя простыми приложениями с угловыми углами в составе Free Code Camp, и я получаю смешанные результаты. В первом приложении все работает нормально. Я делаю $http.get(), возвращается массив объектов, и я могу использовать ng-repeat (ключ в ARRAY) для заполнения моей страницы данными. Это перо можно найти здесь: http://codepen.io/StephenMayeux/pen/ZbBgap

Мое второе приложение практически то же самое (вызов API, на этот раз с Википедией), но вместо GET он использует $http.json() потому что для получения любых данных из Википедии требуется JSONP (а не CORS). Короче говоря, я могу разобрать эти данные и нажать на массив.

И у меня есть хороший массив объектов, с которыми я мог бы перебирать с помощью ng-repeat... но ничего не происходит. Вот ссылка на это перо, или вы можете посмотреть на код ниже: http://codepen.io/StephenMayeux/pen/WQRawr

(function() {
  var app = angular.module('wikipedia', []);

  app.controller('WikiController', ['$http','$scope', function($http, $scope) {
    $scope.search = { text: '' };
    var api = 'http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
    var apiEnding = '&callback=JSON_CALLBACK';
    var pageUrl = 'http://en.wikipedia.org/?curid=';


    $scope.search = function() {
      var final = [];
      $http.jsonp(api + $scope.search.text + apiEnding).success(function(data) {
        var results = data.query.pages 
        angular.forEach(results, function(v,k) {
          final.push({title: v.title, body: v.extract, page: pageUrl + v.pageid})
        })
        console.log(final);

      });
    };    
  }]);

})();

<html ng-app="wikipedia">

<body ng-controller="WikiController">
  <div class="container">
    <h1>Wikipedia Search Engine</h1>
    <form class="form-inline" novalidate>
      <div class="form-group">
        <label class="sr-only" for="searchInWikipedia">Search Wikipedia by using this textbox</label>
        <input type="text" class="form-control" ng-model="search.text" placeholder="What do you want to learn about today?">
      </div>
      <button type="submit" class="btn btn-primary" ng-click="search()"><span class="glyphicon glyphicon-search"> Search</span></button>
    </form>
    <div >
      <div id="search-results" ng-repeat="key in final">
        <h3>{{key.title}}</h3>
        <p>{{key.body}}</p>
      </div>
    </div>
  </div>
</body>

</html>

У меня есть:

1) проверяется на наличие опечаток.

2) напечатано на консоли, и я определенно получаю массив объектов.

3) используется только Angular, и нет других библиотек, таких как jQuery, которые потенциально могут противоречить моему коду.

Любые идеи или указатели?

Stephen Mayeux 02 окт. 2015, в 00:11

Источник

1

Кажется, последняя переменная не является переменной области видимости !!!
Rama Rao M 01 окт. 2015, в 22:14

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Кажется, последняя переменная не является переменной области видимости !!!

JanisP · Answer 1 · 2015-10-01T21-19-00.000Z

Вот ручка: http://codepen.io/anon/pen/gambae

  $scope.final = [];

Вам нужно добавить в область действия вещи, которые вы хотите показать на экране.

Вы были абсолютно правы! Я перепробовал все и даже прочитал документацию $ scope, прежде чем отправлять сюда. Самое смешное, что я не использовал $ scope в своем первом приложении.
В Angular 1 это способ связывания переменных из контроллера в представление ... Существует еще один подход с синтаксисом "controller as", но в мире Angular 1 - $ scope является наиболее постоянным ...