AngularFire 简单示例冻结 Chrome 和 Firefox答案

【问题标题】：AngularFire simple example freezes Chrome and FirefoxAngularFire 简单示例冻结 Chrome 和 Firefox
【发布时间】：2017-03-26 22:48:23
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

您的body 标签上缺少ng-app：<body ng-app="ZzzzApp">。在此处查看一个工作示例：jsbin.com/qucomu/edit?html,js,output。对我来说，该示例在 Chrome 56 中运行良好。
Tnx 帮助我，ng-app 可以像我一样位于 HTML 标记处。我注意到我的脚本在从 StackOverflow 内部运行时可以工作，但在本地运行时会冻结。我试过你的例子，但它似乎没有在 firebase 上写的权限，所以我指向我的数据库并让它再次冻结。
在我的示例中，您确实没有对数据库的写入权限。但是读取操作有效。什么具体操作在我们的本地设置中产生了问题。请提供minimal complete reproduction of the problem：如果读取不是原因，请不要将它们包含在复制中。
再次感谢，你是对的，我没有阅读问题，问题出现在 addMessage 函数上。新寄存器完美添加到 Firebase，但脚本在保存数据后冻结，没有留下任何线索，没有控制台消息，没有 javascript 错误，没有流量……您可以在本地使用我的脚本来重现错误，我的数据库已打开。

标签： angularjs google-chrome firefox firebase angularfire

【解决方案1】：

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

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

【讨论】：

Github 中的github.com/firebase/angularfire/issues/924 似乎涵盖了同样的问题。我建议在那里跟踪以寻求解决方案。

【解决方案2】：

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

尝试像这样更改 addMessage 函数：

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

只是为了确保只清空 messageToSend，在它成功添加到 firebase 数组之后。你的控制台有输出吗？

【讨论】：

感谢您的帮助。控制台上没有错误，这让我发疯。这段代码功能正常，保存本地运行自己看问题。