AngularJS $scope.$apply() 困境

Question

我正在使用 AngularJS 和 Firebase 实时数据库来创建一个简单的列表应用程序，它可以跨设备同步。 Web 客户端代码可以在下面找到。

问题是我需要在我的 Firebase on('val') 回调中使用 $scope.$apply 函数，因为这个回调是从 AngularJS 外部执行的，没有它，绑定是'吨更新。但是，当用户输入新列表项并单击“添加”按钮时，我看到 angular.js:12520 Error: [$rootScope:inprog]。我假设发生这种情况是因为当我已经在 $digest().

中时我正在调用 $digest() 方法

那么我怎样才能实现我想要做的事情呢？即在 AngularJS 之外触发回调时使用显式 $digest() 方法，否则不要使用它。

<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var config = {
                apiKey: "XXX",
                authDomain: "XXX",
                databaseURL: "XXX",
                storageBucket: "XXX",
            };
            firebase.initializeApp(config);
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                var database = firebase.database();
                database.ref().on('value', function(snapshot) {
                    $scope.$apply(function() {
                        $scope.items = [];
                        var result = snapshot.val();
                        for(var key in result) {
                            var listItem = result[key];
                            $scope.items.push(listItem);
                        }
                    });
                });
                $scope.addItem = function () {
                    database.ref().push().set($scope.addMe);
                }
            });
        </script>
        <div ng-app="myApp" ng-controller="myCtrl">
            <ul>
                <li ng-repeat="x in items">{{x}}</li>
            </ul>
            <input ng-model="addMe">
            <button ng-click="addItem()">Add</button>
        </div>
    </body>
</html>

Answer 1

修复 1 -

使用

$timeout(function(){ 
  $scope.$apply()
  ... write your code here 
},0)

摘要循环完成时触发。

修复 2 -

如果摘要周期为运行，

$scope.$$phase 将 return 为真，否则为假，但它对您的情况没有用，因为它不提供任何回调函数。

也不推荐使用

AngularJS $scope.$apply() 困境

AngularJS $scope.$apply() Dilemma

javascript

angularjs

firebase

firebase-realtime-database