admin管理员组文章数量:1420187
I created this simple web application to put data into a firebase database. The problem is that I get a error when I open the webpage in my browser. This is the error I get
Possibly unhandled rejection: {} angular.js:14324
Also when I press the sumbit button the first time with no data in the fields it displays the same error as shown above. Then when I press the button again it does submit the empty fields to the database. I think angular finds it a problem that the fields are empty. Am I missing something? Putting text in the fields works fine and it also submits to the database. It's just with empty fields that their are problems.
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,
pany: $scopepany,
reason: $scope.reason,
wayofcontact: $scope.wayofcontact,
});
$scope.name = '';
$scopepany = '';
$scope.reason = '';
$scope.wayofcontact = '';
document.getElementById("name").focus();
};
});<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8">
<title>AngularJS Tutorial</title>
<script type="text/javascript" src=".6.0/angular.min.js"></script>
<link rel="stylesheet" href=".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: {{messagepany}}<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="pany" 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=".6.0/firebase.js"></script>
<script type="text/javascript" src=".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>I created this simple web application to put data into a firebase database. The problem is that I get a error when I open the webpage in my browser. This is the error I get
Possibly unhandled rejection: {} angular.js:14324
Also when I press the sumbit button the first time with no data in the fields it displays the same error as shown above. Then when I press the button again it does submit the empty fields to the database. I think angular finds it a problem that the fields are empty. Am I missing something? Putting text in the fields works fine and it also submits to the database. It's just with empty fields that their are problems.
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,
pany: $scope.pany,
reason: $scope.reason,
wayofcontact: $scope.wayofcontact,
});
$scope.name = '';
$scope.pany = '';
$scope.reason = '';
$scope.wayofcontact = '';
document.getElementById("name").focus();
};
});<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8">
<title>AngularJS Tutorial</title>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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.pany}}<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="pany" 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./firebasejs/3.6.0/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase./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>2 Answers
Reset to default 3This error appears to be something that was added as a part of the $qProvider that is used to configure $q
https://docs.angularjs/api/ng/provider/$qProvider
did a search on the error since it didn't look familiar but looks like you can just disable the feature in a config block with this provider
app.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
I guess the only other thing to add is something that returns a promise here must be failing but has no error handler registered.
Attach an error handler to the $loaded() promise chain:
$firebaseArray(ref).$loaded().then(function(){
$scope.loading = false;
document.getElementById('loader').style.display = 'none';
}).catch(function (e) {
console.log(e);
throw e;
});
If the error is ing from that .then block, the console will show more detail.
AngularJS 1.6.0 has made errors in .then blocks less noisy. Unfortunately some details are lost. AngularJS 1.6.1 will have better error messages.
Due to c9dffde, possibly unhandled rejected promises will be logged to the
$exceptionHandler. Normally, that means that an error will be logged to the console, but in tests$exceptionHandlerwill (by default) re-throw any exceptions. Tests that are affected by this change (e.g. tests that depend on specific order or number of messages in$exceptionHandler) will need to handle rejected promises.
-- AngularJS Developer Guide - Migrating to v1.6 - $q.
See also:
AngularJS Issue #14631 $q: Unhandled rejections should not be stringified
AngularJS Issue #15527 Add traceback to unhandled promise rejections
本文标签： javascriptPossibly unhandled rejectionError when creating a form with angularjsStack Overflow
版权声明：本文标题：javascript - Possibly unhandled rejection -- Error when creating a form with angularjs - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745325234a2653559.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论