Question

我创建了这个简单的Web应用程序，将数据放入firebase数据库。问题是我在浏览器中打开网页时出错。这是我得到的错误

Possibly unhandled rejection: {} angular.js:14324

此外，当我第一次按下sumbit按钮且字段中没有数据时，它会显示与上面显示的相同的错误。然后当我再次按下按钮时，它会将空字段提交给数据库。我认为angular发现字段是空的问题。我错过了什么吗？将文本放在字段中工作正常，它也提交到数据库。它只是空白的领域，他们是问题。

＆＃13;

var app = angular.module("sampleApp", ["firebase"]);
app.controller("SampleCtrl", function($scope, $firebaseArray) {
    var ref = firebase.database().ref().child("messages");
    $scope.loading = true;
    $firebaseArray(ref).$loaded().then(function(){
        $scope.loading = false;
        document.getElementById('loader').style.display = 'none';
    });
    $scope.messages = $firebaseArray(ref);
    $scope.addMessage = function() {
        $scope.messages.$add({
            name: $scope.name,
            company: $scope.company,
            reason: $scope.reason,
            wayofcontact: $scope.wayofcontact,
        });
        $scope.name = '';
        $scope.company = '';
        $scope.reason = '';
        $scope.wayofcontact = '';
        document.getElementById("name").focus();
    };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Tutorial</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
    ul {
        list-style-type: none;
    }
    </style>
</head>
<body ng-controller="SampleCtrl" ng-cloak >
    <div class="container" ng-view>
        <div ng-show="loading">
            Loading...
        </div>
        <ul class="list-unstyled">
            <li ng-repeat="message in messages | filter:{name: '!!'}">
                <h1>{{message.name}}</h1>
                <p>
                    Bedrijf: {{message.company}}<br>
                    Reden: {{message.reason}}<br>
                    Email/telefoon: {{message.wayofcontact}}<br>
                </p>
                <button ng-click="messages.$remove(message)" class="btn btn-danger">Verwijder verzoek</button>
                <br><br>
            </li>
        </ul>
        <form ng-submit="addMessage()" novalidate>
            <div class="row">
                <div class="col-xs-6 form-group">
                    <input type="text" class="form-control" id="name" ng-model="name" placeholder="Naam" autofocus required/>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" ng-model="namecolleague" placeholder="Naam collega" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="company" placeholder="Bedrijf" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <textarea rows="3" type="text" class="form-control" ng-model="reason" placeholder="Reden van bellen" required></textarea>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="wayofcontact" placeholder="Email of nummer" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <button type="submit" class="btn btn-primary">Add Message</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxx"
    };
    firebase.initializeApp(config);
    </script>
</body>
</html>

＆＃13;

Answer 1

此错误似乎是作为$ qProvider的一部分添加的，用于配置$ q

https://docs.angularjs.org/api/ng/provider/$qProvider

对错误进行了搜索，因为它看起来并不熟悉，但看起来你可以使用此提供程序禁用配置块中的功能

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

我想要添加的唯一其他内容是返回一个承诺，这里必须失败，但没有注册错误处理程序。

Answer 2

将错误处理程序附加到$loaded()承诺链：

$firebaseArray(ref).$loaded().then(function(){
    $scope.loading = false;
    document.getElementById('loader').style.display = 'none';
}).catch(function (e) {
    console.log(e);
    throw e;
});

如果错误来自.then阻止，控制台将显示更多详细信息。

AngularJS 1.6.0使.then块中的错误减少了噪音。不幸的是，一些细节丢失了AngularJS 1.6.1将有更好的错误消息。

由于c9dffde，可能未处理的拒绝承诺将被记录到$exceptionHandler。通常，这意味着将错误记录到控制台，但在测试中$exceptionHandler将（默认情况下）重新抛出任何异常。受此更改影响的测试（例如，依赖于$exceptionHandler中特定顺序或消息数量的测试）将需要处理被拒绝的承诺。

- AngularJS Developer Guide - Migrating to v1.6 - $q。

另见：

可能是未处理的拒绝 - 使用angularjs创建表单时出错

2 个答案: