#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
(рекомендуется)