Переменная области видимости не сбрасывается – AngularJS
У меня есть функция в моем контроллере angularJS, которая вызывается при изменении раскрывающегося списка:
В настоящее время будет выбран параметр по умолчанию, и записи в соответствии с этим параметром будут выбраны из БД и установлены в переменную scope.
Это прекрасно работает. Теперь, когда опция изменена,
$scope.optionChanged = function() {
$('#loading').show();
$('#recordForm').trigger("reset");
var data = {
'id': $scope.data.id,
};
$rootScope.idChange = data.catId;
if ($scope.id !== undefined){
$http({
'url': '/pendingCount',
'method': 'POST',
'headers': {
'Content-Type': 'application/json'
},
'params': data
})
.then(
function(
response) {
$scope.pendingCount = response.data.pendingCount;
if (($scope.pendingCount !== 0) && ($scope.pendingCount !== null) && ($scope.pendingCount !== undefined)) {
$http({
'url': '/customerRecord',
'method': 'POST',
'headers': {
'Content-Type': 'application/json'
},
'params': data
})
.then(
function(
response) {
$('#loading').hide();
$scope.record = response.data;
console.info($scope.record);
})
});
} else {
$("#noActive").show()
}
}
Проверено, что $scope.record печатает желаемый результат в консоли. Но переменная области видимости не отражается в пользовательском интерфейсе.
Даже попробовали $scope.$apply, а также предложение, представленное в ответе это. Но не повезло.
Может кто-нибудь помочь?
Как вы используете его в пользовательском интерфейсе? Вы уверены, что $scope, в котором вы его используете, совпадает с $scope кода?
Также проверить - вы Конечно это данные, которые вы ожидаете? Например, если вы ожидаете один объект записи, вы уверены, что это не массив с одной записью?
Нет ошибок @tymeJV. Спасибо за ваше руководство. Скоро почистим код. Я точно сохранил тот же код, который используется для отображения выпадающих записей по умолчанию, как указано в вопросе. Данные одного типа.
Да @georgeawg. Тот же объект области используется в пользовательском интерфейсе.
Создайте демонстрацию на сайте-песочнице, таком как plunker, codepen, jsfiddle и т. д., который воспроизводит проблему.
Трудно сказать без демонстрации - другие вещи, которые приходят на ум - возможно, разные контроллеры (проблема дочерней/родительской области) или вне области действия контроллера. Вы можете указать идентификатор на родительском контроллере, затем выполнить angular.element("document.getElementById("yourIDhere")).scope().record в консоли и убедиться, что вывод по-прежнему правильный.
Вы молодцы!! На самом деле я дважды использовал ng-controller внутри моей html-страницы в двух разных местах. Я узнал, что это проблема. Но не знаю, каким образом и как это влияет. Есть идеи, ребята?
Каждый экземпляр контроллера имеет свою область действия и ничего не знает о других экземплярах.
Привет, Майкл. Вам не хватает закрывающей фигурной скобки для следующего оператора if: if (($scope.pendingCount !== 0) && ($scope.pendingCount !== null) && ($scope.pendingCount !== undefined)) { ... я думаю, вам нужно добавить его после последнего .then()
Дайте мне знать, если он работает правильно после добавления скобки. Если это все еще не работает, я думаю, это может быть связано с тем фактом, что HTTP-запросы возвращают обещания. Боковое примечание: рекомендуется свести код вашего контроллера к минимуму и поместить любой дополнительный код в методы на фабрике (чтобы вы могли помещать свои http-запросы в методы на фабрике, а затем вызывать их из вашего контроллера. Это то, что я обычно делают с angular JS)
Да @Сара. Спасибо за указание. У меня это есть в моем коде. Но пропустил здесь при копировании сюда.
@Sarah, нет ничего плохого в том, как OP обрабатывает обещание $http. Также он не будет печатать правильное значение на консоли (как указано в вопросе), если обещание не было обработано должным образом.
@charlietfl Мне жаль, что вы меня неправильно поняли. Я не противоречил тому, как он справился с обещанием, и мне было ясно, что он получает успешный ответ на http-запрос. меня больше беспокоил способ добавления ответа в $scope. Видимо, это не работает так, как вы ожидаете. Последний ответ на этой странице немного лучше объясняет проблему: stackoverflow.com/questions/32912637/… Он предлагает использовать $scope.$apply() после обновления области. Однако Майкл сказал, что пробовал это.
Обратные вызовы @Sarah $http будут обрабатывать $apply внутри. Самостоятельное добавление обычно приводит к ошибке дайджеста. Вся проблема OP связана с несколькими экземплярами контроллера, как указано выше.
@charlietfl Хорошо, спасибо за разъяснение.
Ответы 1
Actually I have double used by ng-controller inside my html page at 2 different locations. I got to know that this is an issue. But don't know in what way and how it is affecting. Any idea guys?
<div ng-controller = "myCtrl">
<select ng-model = "data.id" ng-change = "optionChanged()">
</select>
</div>
<div ng-controller = "myCtrl">
{{record}}
</div>
В приведенном выше сценарии создаются два контроллера с разными областями. Изменения переменных области в первом экземпляре контроллера не будут видны в области действия второго экземпляра.
Дополнительные сведения см. в статье Руководство разработчика AngularJS — Иерархии областей.
Да @georgeawg. Но моя декларация была на двух div, когда один из div был внутри другого.
Очень сложно ответить на вопрос об ошибке в коде, когда вопрос не включает какой-либо код с ошибками. Проблема вызвана глючным шаблоном, но вопрос не включает глючный шаблон.
В вашей консоли нет ошибок? Примечание: не смешивайте jQuery и Angular, как вы это делаете — рано или поздно это вызовет проблемы.