Данные не отображаются, пока я не начну фильтровать?

#javascript #angularjs #data-binding

#javascript #angularjs #привязка данных

Вопрос:

Я пытаюсь использовать функцию привязки данных AngularJS для отображения списка данных, для которых я отправляю запрос Ajax. Я новичок в AngularJS, поэтому я знаю, что здесь чего-то не хватает. Данные заполняются, но они отображаются только в том случае, если я включаю текстовое поле с ng-model директивой и начинаю вводить в него.

Я знаю, что мой код не совсем подходит, но я пытаюсь сделать это в SharePoint, и у меня возникают проблемы с использованием модулей и фабрик, поэтому я пытаюсь сначала получить простую демонстрационную настройку. Любая помощь будет высоко оценена.

Код

 <!-- The data will not show until I start typing in this text box
Other than that I do not need it. -->
<input ng-model="foo" />

<ul ng-controller="SimpleController">
     <li ng-repeat="item in discussions">
         {{item.Title}}
     </li>
</ul>
  
 function SimpleController($scope) {                        
  $.ajax({
     url: requestUri,
     type: "GET",
     headers: {
        "accept": "application/json;odata=verbose",
     },
     success: function (data) {
        $scope.discussions = data.d.results;      
        console.log("SimpleController success callback");
     },
     error: function (err) {
        alert(err);
     }
   });
}
  

Комментарии:

1. Можете ли вы создать скрипку, которая воспроизводит проблему?

2. Работаю над их воспроизведением за пределами SharePoint… Я не могу точно воспроизвести точную среду, в которой я работаю.

3. Попробуйте $scope.$apply() после настройки $scope.discussions = data.d.results; и посмотрите, работает ли это так

Ответ №1:

Я полагаю, что происходит то, что Angular не знает, когда $.ajax вызов завершен, поэтому вы могли бы технически использовать if ( $scope.$$phase ) $scope.$apply() , но я бы рекомендовал перестроить $.ajax «Угловой путь»:

 function SimpleController($scope, $http) {
  $http.get( requestUri )
  .then(function( json ) {
    console.log( json );
    $scope.discussions = json.data;
  });
}
  

Подробнее:

  • $scope.$apply : вручную сообщите Angular пересчитать область видимости при изменении данных за пределами данных Angular, например, jQuery.
  • $http : Угловая версия $.ajax и автоматически обрабатывает $scope.$apply (рекомендуется)