我正在尝试在AngularJS范围内记录登录用户,但在页面首次加载时收到错误.
单击"登录"似乎工作,但然后注销保释与相同的"$ apply has in progress"错误.
我期待我只是误解了它是如何$apply工作的,有人可以帮忙吗？
更新:
如果我将if (user)部分包装$apply()成如下,它可以无缝地工作.
var auth = new FirebaseAuthClient(ref, function(error, user) {
if (user) {
$scope.$apply(function(){ $scope.user = user; });
console.log(user);
} else if (error) {
// I can't vouch for this, haven't tested it
$scope.$apply(function(){ $scope.user = null; });
console.log(error);
} else {
$scope.user = null;
console.log("logged out");
}
});
原始代码:
app.js:
var app = angular.module('app', ['firebase']);
controller.js:
app.controller('Login', ['$scope', 'angularFire',
function($scope, angularFire) {
$scope.loginstatus …我发现angularFire在与纯Firebase JavaScript API结合使用时总是让我感到困惑.
比方说,我不知道如何调用火力地堡datasapshot API ss.name(),ss.hasChild(), ss.forEach()等在angularFire.
因此我决定单独使用Firebase JavaScript API,因为我意识到它已经与AngularJS进行双向数据绑定(显式)而不使用angularFire.
但我遇到了问题ng-repeat.返回的数据是一个对象,所以我无法排序.然后我找到了这个orderByObject过滤器,但是一旦转换为数组,我就会丢失对象密钥.
Firebase团队可以帮助我改进此orderByObject过滤器以支持对象键吗？
有没有办法从firebase获取随机记录,如下所示:
{
"-JbmopNnshefBT2nS2S7" : {
"dislike" : 0,
"like" : 0,
"post" : "First post."
},
"-JbmoudijnJjDBSXNQ8_" : {
"dislike" : 0,
"like" : 0,
"post" : "Second post."
}
}
我使用此代码来解决问题,但它下载了所有记录,因此如果DB更大,我的应用程序将非常慢:
HTML代码:
<div ng-controller="RandomCtrl">{{RandomPost.post}}</div>
JS代码:
var app=angular.module('App', ['firebase']);
app.controller('RandomCtrl', function($scope, $firebase){
var ref = new Firebase("https://ind.firebaseio.com/");
var sync=$firebase(ref);
$scope.messages = sync.$asArray();
$scope.GetRandomPost=function(){
return $scope.RandomPost=$scope.messages[Math.floor(Math.random()*$scope.messages.length)];
};
$scope.GetRandomPost();
});
我目前正在尝试使用路由,以便用户在未经过身份验证时被重定向到某个页面,如果经过身份验证,则会重定向到另一个页面.
下面是HTML
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<div ng-show="user">
<p>Hello, {{ user.facebook.displayName }}</p>
<button ng-click="auth.$unauth()">Logout</button>
</div>
<div ng-hide="user">
<p>Welcome, please log in.</p>
<button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button>
</div>
</body>
</html>
以下是申请表
var app = angular.module("sampleApp", ["firebase"]);
//Generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://crowdfluttr.firebaseio.com/");
return $firebaseAuth(ref);
}]);
//auth is now used in controller
app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) {
$scope.auth = Auth;
$scope.user = $scope.auth.$getAuth();
}])
//redirects to homepage …authentication angularjs firebase angular-routing angularfire
我一直在阅读关于离线(本地)存储和AngularFire的SO,我知道AngularFire用于与Angular模型和DOM的3路绑定使用.
具体参考如何在设备联机时将脱机数据库与Firebase同步？我可以看到,将本地存储引入混合中并不是一件小事.我不太明白在该线程中"启动"Firebase的概念.
但是,我确实需要能够在离线模式下启动应用程序.这是我的情景:
我知道Kato还提到在AngularFire的未来版本中可能会有离线存储功能 - 这是否还有可能？否则我的想法是这样做:
它不是一种好方法,但我不知道其他任何方式.有没有办法直接将Firebase绑定到本地存储？
我有一个带有日期字段(开始日期)的屏幕,用户可以在其中输入任何日期
<label class="item item-input">
<span class="input-label">Start Date</span>
<input type="date" ng-model="currentItem.OpenDate">
</label>
我将以下内容添加到"保存"按钮的单击事件中
console.log("Normal date " + $scope.currentItem.OpenDate);
控制台显示以下日期
Normal date Fri May 01 2015 00:00:00 GMT-0400 (Eastern Daylight Time)
这是推送活动
$scope.data.accounts.push({ 'AccountName': $scope.currentItem.AccountName, 'StartBalance': $scope.currentItem.StartBalance, 'OpenDate': $scope.currentItem.OpenDate, 'AccountType': $scope.currentItem.AccountType });
但是,日期$scope.currentItem.OpenDate未保存到Firebase,其余数据正在正常保存.我错过了什么？
所以我真的很接近这个问题.基本上,我有登录工作,我有代码设置来监视onAuthStateChanged,但问题是,当我刷新页面,即使用户当前登录,它仍然重定向到/login页面,因为我有auth警卫设置,检查用户是否已登录.
我有一个auth服务设置,可以进行所有身份验证检查.
在我的auth服务构造函数中,这就是我onAuthStateChanged设置代码的地方:
constructor(
private auth: AngularFireAuth,
private router:Router,
private db:AngularFireDatabase,
) {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// What do I need to put here to ensure that the auth guard goes to the intended route?
}
});
}
这是我的auth guard的canActivate()方法:
canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean> {
if(this.authService.getAuthenticated()) {
return Observable.of(true);
} else {
this.router.navigate(['/login']);
}
}
这是getAuthenticated()方法:
getAuthenticated() {
return firebase.auth().currentUser;
}
更新:
以下是用户实际登录时调用的方法.在实际组件中,这是登录方法:
login(data, isValid) {
if(isValid) {
this.authService.login(data.email, data.password)
.then(
(data) …javascript firebase angularfire firebase-authentication angular
angularfire中child_added的angularfire中的child_added事件是不同的？
为什么angularfire返回所有列表包括child_added之后的值,而在firebase中它只返回la
this.userList = this.room.getAllUser();
this.userList.snapshotChanges()
.subscribe(actions => {
console.log(actions);
actions.forEach(action => {
console.log(action.type);
console.log(action.key);
console.log(action.payload.val());
})
我是否需要再次扫描响应并比较数组中的密钥？推之前呢？
当我在前台收到 firebase 推送通知时会发生此错误。请注意，推送通知在后台运行良好（即当浏览器最小化或关闭时）。我已经安装了最新版本的@angular/fire@6.0.0 和 firebase@7.13.2。我不确定这是 firebase 还是 @angular/fire 的问题，还是我需要向 plyfills.ts 添加一些代码
接收通知的方法
receiveMessage() {
this.ngFireMessaging.messages.subscribe(
(message: any) => {
console.log(message);
this.currentMessage$.next(message);
});
}
Angular CLI 版本
Angular CLI: 9.1.0
Node: 12.16.0
OS: win32 x64
Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.901.0
@angular-devkit/build-optimizer 0.901.0
@angular-devkit/build-webpack 0.901.0
@angular-devkit/core 9.1.0
@angular-devkit/schematics 9.1.0
@angular/cdk 9.2.0
@angular/fire 6.0.0
@angular/material 9.2.0
@ngtools/webpack 9.1.0
@schematics/angular 9.1.0
@schematics/update …polyfills firebase angularfire firebase-cloud-messaging angular9
我尝试使用 AngularFireAuth.createUserWithEmailAndPassword 捕获异常并向用户显示存在的用户名/密码错误消息。异常处理代码运行，但不知何故，类似的异常仍然冒泡到全局错误处理程序。
import { Component } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';
@Component({
selector: 'register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
constructor(
private af: AngularFireAuth,
) {}
async onRegisterUsingEmailAndPassword(event) {
const { email, password } = event;
try {
await this.af.createUserWithEmailAndPassword(email, password);
} catch(error) {
console.log(error); // <-- this code runs and logs {code: "auth/email-already-in-use", ...}
}
}
}
直接使用 firebase.auth 按预期工作：异常代码处理程序运行并且没有异常冒泡到全局错误处理程序。
import { Component } from '@angular/core';
import firebase from 'firebase/app';
@Component({
selector: 'register',
templateUrl: …angularfire ×10
firebase ×10
angularjs ×4
angular ×3
angular9 ×1
database ×1
javascript ×1
polyfills ×1