AngularFire 简单示例冻结 Chrome 和 Firefox

Question

我正在尝试使用 Angular 和 Firebase 实现一个简单的聊天示例。它在 Safari 上运行良好，但它会冻结 Chrome 和 Firefox（运行在本地或远程基础上）。有没有人知道我的代码有什么问题？感谢您的帮助！

<html ng-app="ZzzzApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

    <script type="text/javascript">
        var app = angular.module('ZzzzApp',['firebase']);

        app.controller("ChatController", function($scope, $firebaseArray){  
            var config = {
               apiKey: "AIzaSyA8nk5dSF8HKUSQr_2H04hwTRZ2NWDwSOE",
               authDomain: "chattest-9fe81.firebaseapp.com",
               databaseURL: "https://chattest-9fe81.firebaseio.com",
               storageBucket: "chattest-9fe81.appspot.com",
               messagingSenderId: "353125975278"
            };
            firebase.initializeApp(config);

            var ref = firebase.database().ref().child('12345');
            $scope.messages = $firebaseArray(ref);

            $scope.addMessage = function(){
                $scope.messages.$add({direction: 'S', message: $scope.messageToSend});
                $scope.messageToSend = '';
            };   
        });
    </script>
</head>

<body>
    <div ng-controller="ChatController">    
        <div ng-repeat="message in messages">
            <p>{{message.message}}</p>
        </div>      
        <input type="text" class="form-control" ng-model='messageToSend'>
        <button type="button" class="btn btn-default" ng-click='addMessage()'>Send</button>
    </div>      
</body>

Answer 1

不确定哪里出了问题 - 您的数据结构如何？

尝试像这样更改 addMessage 函数：

$scope.addMessage = function(){
    $scope.messages.$add({direction: 'S', message: $scope.messageToSend})
    .then(() => $scope.messageToSend = '')
};

只是为了确保您仅在 messageToSend 成功添加到 firebase 数组后清空它。您的控制台中有任何输出吗？

Answer 2

这似乎是 Firebase ^3.7.1 中的一个错误。有同样的问题并遇到另一个。尝试指定 Firebase 版本：

dependencies: { "firebase": "3.7.0", "angularfire": "^2.3.0" ... }

AngularFire 简单示例冻结 Chrome 和 Firefox

AngularFire simple example freezes Chrome and Firefox

firefox

google-chrome

angularjs

firebase

angularfire