手动调用$ $范围对AJAX调用申请加薪的错误 - 错误：[$ rootScope：inprog] [英] Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

问题描述

我试图用角材料 MD-自动完成，推荐列表由服务主机通过检索 Ajax调用。由于延迟响应的 $范围变量未更新UI正确，它更新只是有任何事件发生在特定的控制。例焦点发出，再次单击控件，然后将其更新为新值的用户界面。

我的确切问题快照张贴在<一个href=\"http://stackoverflow.com/questions/35624977/md-items-is-not-updating-the-suggesion-list-properly-in-md-autocomplete-angular\">md-items不正确地更新suggesion列表MD-自动完成角材料

在谷歌的很长一段时间我有一个理论上的解决方案是 $ $范围适用于（） - 从引用<一个得到href=\"http://stackoverflow.com/questions/21127709/angular-controller-scope-not-updating-after-jquery-ajax-call\">Angular jQuery的Ajax调用后控制器范围内没有更新

不过，我得到了一个错误的错误：[$ rootScope：inprog] ... 请帮助我如何修正这个错误

完整的示例源代码code：

\r

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT;链接rel =stylesheet属性HREF =htt​​p://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css＆GT;\r
    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js\"></script>\r
\r
＆LT;！ - 角材质库 - ＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js\"></script>\r
＆LT;身体GT;\r
\r
＆LT; D​​IV NG-应用=对myAppNG控制器=myCtrl＆GT;\r
\r
＆LT; P＆GT;人来选择：其中; / P＆GT;\r
\r
＆LT; MD-自动完成\r
          NG-禁用=isDisabled\r
          MD-无缓存=非缓存\r
          MD-选择项=将selectedItem\r
          MD-搜索文本的变化=searchTextChange（）\r
          MD-搜索文本=SEARCHTEXT\r
          MD-选择项变化=selectedItemChange（项目）\r
          MD项=项目中的人\r
          MD-项目文本=item.Name\r
          MD-最小长度=0\r
          占位=哪个是你最爱的人？＆GT;\r
        ＆LT; MD-项目模板＆GT;\r
          ＆LT;跨度MD-高亮文本=ctrl.searchTextMD-亮点-标志=^ I＆GT; {{item.Name}} - {{item.City}}＆LT; / SPAN＆GT;\r
        ＆LT; / MD-项目模板＆GT;\r
        ＆LT; MD-未找到＆GT;\r
          没有人匹配{{SEARCHTEXT}}被发现了。\r
        ＆LT; / MD-未找到＆GT;\r
      ＆LT; / MD-自动完成＆GT;\r
      ＆LT; BR /＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
    VAR应用= angular.module（'对myApp'，['ngMaterial']）;\r
\r
    app.controller（'myCtrl'，函数（$范围，$ HTTP，$ Q）{\r
\r
        $ scope.searchText =;\r
        $ scope.Person = [];\r
        $ scope.selectedItem = [];\r
        $ scope.isDisabled = FALSE;\r
        $ scope.noCache = FALSE;\r
\r
        $ scope.selectedItemChange =功能（项目）{\r
            警报（变更项目）;\r
        }\r
        $ scope.searchTextChange =功能（）{\r
\r
            $ HTTP（{\r
                方法：GET，\r
                网址：http://www.w3schools.com/angular/customers_mysql.php\r
                params：一个{\r
                    UID：$ scope.searchText\r
                }\r
            }）\r
            。然后（功能（响应）{\r
                $范围。$应用（函数（）{\r
                    $ scope.Person = response.data.records;\r
                }）;\r
            }）;\r
        }\r
\r
    }）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r

\r

其实我用localhost Ajax调用，这里我提到的示例阿贾克斯网址是 HTTP： //www.w3schools.com/angular/customers_mysql.php 供大家参考，以获取数据。

  

请注意：我需要使用 $ $范围适用于（） Ajax调用中没有一个错误的错误：[$ 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

解决方案

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

这篇关于手动调用$ $范围对AJAX调用申请加薪的错误 - 错误：[$ rootScope：inprog]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！