手动调用 $scope.$apply 在 ajax 调用中引发错误 - 错误:[$rootScope:inprog] [英] Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]
问题描述
我尝试使用 Angular Material md-autocomplete，建议列表是通过 Ajax 调用从服务主机检索的.由于延迟响应，$scope变量没有正确更新UI，它只会在特定控件中发生任何事件时更新.例如 Focus Sent Out 并再次单击 Control，然后它会使用新值更新 UI.
我的确切问题快照发布在
$scope.$apply 在你使用 $ 函数时会被 Angular 自动调用，所以你不必自己调用它，您的 UI 未更新的原因一定在其他地方.
I tried to use Angular Material md-autocomplete, the suggestion list was retrieved from Service Host via Ajax Call. Because of Delaying response, the $scope variable was not updating the UI Properly, it updates only is there is any event occur in the specific control. For Example Focus Sent Out and again Click the Control, then it updates the UI with the new value.
My Exact issue snapshot is posted in md-items is not updating the suggesion list properly in md-autocomplete Angular Material
After a long time of google I got a theoretical solution is $scope.$apply() - reference got from Angular controller scope not updating after jQuery ajax call
But I got an error Error: [$rootScope:inprog]... Kindly assist me how to fix the error
The Complete Sample Source Code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Person to Select:</p>
<md-autocomplete
ng-disabled="isDisabled"
md-no-cache="noCache"
md-selected-item="selectedItem"
md-search-text-change="searchTextChange()"
md-search-text="searchText"
md-selected-item-change="selectedItemChange(item)"
md-items="item in Person"
md-item-text="item.Name"
md-min-length="0"
placeholder="Which is your favorite Person?">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Name}} - {{item.City}}</span>
</md-item-template>
<md-not-found>
No Person matching "{{searchText}}" were found.
</md-not-found>
</md-autocomplete>
<br/>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function ($scope, $http, $q) {
$scope.searchText = "";
$scope.Person = [];
$scope.selectedItem = [];
$scope.isDisabled = false;
$scope.noCache = false;
$scope.selectedItemChange = function (item) {
alert("Item Changed");
}
$scope.searchTextChange = function () {
$http({
method: "GET",
url: "http://www.w3schools.com/angular/customers_mysql.php",
params: {
uid: $scope.searchText
}
})
.then(function (response) {
$scope.$apply(function () {
$scope.Person = response.data.records;
});
});
}
});
</script>
</body>
</html>
actually I'm using localhost for ajax call, Here I mentioned the sample Ajax URL is http://www.w3schools.com/angular/customers_mysql.php for your reference to get data.
Note: I need to use the
$scope.$apply()within the Ajax Call without an error Error: [$rootScope:inprog]...
Kindly assist me... how to fix.
The Snapshot of Browser
$scope.$apply is automatically called by Angular when you use a $ function, so you don't have to call it yourself, the reason your UI isn't updating must be somewhere else.
这篇关于手动调用 $scope.$apply 在 ajax 调用中引发错误 - 错误:[$rootScope:inprog]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
