Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

问题

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

回答1:

$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.

回答2:

If that is the way you need to do it,try the $scope.$applyAsync

Documentation here.

回答3:

Angular usually calls the $digest, $watch internally to bind the scope variable.

In your case, You have to manually invoke any of the event listeners to bind the data value.

Try using $watch or $apply in your scope variable

function Ctrl($scope) {
  $scope.messageToUser = "You are done!";

    setTimeout(function () {
        $scope.$apply(function () {
            $scope.messageToUser = "Timeout called!";
        });
    }, 2000);

来源：https://stackoverflow.com/questions/35646077/manually-call-scope-apply-raise-error-on-ajax-call-error-rootscopeinprog

标签

jquery

angularjs

ajax

angularjs-scope