标签: angularfire

如何从AngularFire 0.5.0中的.$ on('loaded')访问加载的数据

我无法使用AngularFire 0.5.0中的.$ on方法访问从firebase加载的数据

在回调当我注销范围的内容时,数据就在那里,但当我尝试使用更深入的数据时,我得到了undefined.也许我误解了你如何访问这种方法中的数据?

这是我的控制器:

.controller('AssetDetailCtrl',
  ['$scope', '$firebase', 'FBURL',
  function($scope, $firebase, FBURL) {
    var refAsset = new Firebase(FBURL + '/assets/' + $scope.assetId);
    $scope.asset = $firebase(refAsset);

    // when data is loaded check validity of the route
    $scope.asset.$on('loaded', function() {
      console.log($scope.asset); // complete with the asset data
      console.log($scope.asset.name); // undefined even though it appears in the above console log
    });
}])
Run Code Online (Sandbox Code Playgroud)

所以也许有更好的方法来做到这一点.
为什么即使它登录到控制台,我也无法访问范围内的数据?

这是第一个console.log的结果

Object { $bind: function, $add: function, $save: function, $set: function, $remove: function…}
  $add: function (b,c){var d;return …
Run Code Online (Sandbox Code Playgroud)

angularjs firebase angularfire

4
推荐指数
1
解决办法
2047
查看次数

当复选框更改时,AngularFire 3向数据绑定不会更新firebase

我正在使用AngularFire模块开发一个使用Angular和Firebase的简单todo应用程序.

所以我的模型中有一个布尔属性,由模板中的复选框表示,问题是我正在尝试使用AngularFire的三路数据绑定,使用该$bind方法保持所有更改同步(firebase数据,DOM和ng) -model)但是当我选中一个复选框时,firebase数据没有更新.

这是我使用AngularFire $bind方法的控制器:

angular.module('singularPracticeApp')
  .controller('TodoCtrl', ['$scope', 'TodoService', function ($scope, todoService) {
    $scope.todos = todoService;

    $scope.todos.$bind($scope, 'todo.done');

    $scope.addTodo = function () {
      $scope.todos.$add({text: $scope.todoText, done:false});
      $scope.todoText = '';
    };

    $scope.remaining = function () {
      var count = -11;
      angular.forEach($scope.todos, function(todo){
        count += todo.done? 0 : 1;
      });
      return count;
    };

    $scope.clear = function (id) {
      $scope.todos.$remove(id);
    };
  }]);
Run Code Online (Sandbox Code Playgroud)

这是tempalte文件:

<div ng-controller="TodoCtrl">
  <h4>Task runner</h4>
  <span>{{remaining()}} todos left.</span>
  <ul>
    <li ng-repeat="(id, todo) in todos">
      <input type="checkbox" ng-model="todo.done">
      <span …
Run Code Online (Sandbox Code Playgroud)

javascript data-binding angularjs firebase angularfire

4
推荐指数
1
解决办法
3034
查看次数

我应该总是通过$ push()将新对象添加到对象列表中吗?

我正在为Firebase和AngularFire创建一个由用户,帖子和评论组成的数据结构.我的印象是用户的密钥/ ID是用户名,而评论和帖子的密钥/ ID将是自动生成的firebase密钥.

我一直在研究angularfire文档,并对$push()使用该方法时添加到对象的自动生成的键(name())感到困惑.

查看firebase网站上的一些示例,我看到Users对象的示例没有自动生成的密钥 - 单个用户的密钥是用户名 - 但同时添加密钥数组通过的对象 $push

我的问题是:

1)我应该一直使用firebase自动生成的密钥吗?如果没有,那么如何添加新用户,因为$push()自动创建密钥,并$set()重置所有用户?

2)$id和之间有什么关系name()

示例数据

来自https://www.firebase.com/docs/web/guide/saving-data.html

文档显示以下Users对象:

{
  "users": {
    "alanisawesome": {
      "date_of_birth": "June 23, 1912",
      "full_name": "Alan Turing"
    },
    "gracehop": { 
      "date_of_birth": "December 9, 1906",
      "full_name": "Grace Hopper"
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

如何在不重置当前用户$set()或添加angularfire id的情况下添加更多用户push()

然后是一个带有生成id的Posts对象:

{
  "posts": {
    "-JRHTHaIs-jNPLXOQivY": {
      "author": "gracehop",
      "title": "Announcing COBOL, a New Programming Language"
    },
    "-JRHTHaKuITFIhnj02kE": {
      "author": "alanisawesome", …
Run Code Online (Sandbox Code Playgroud)

angularjs firebase angularfire

4
推荐指数
1
解决办法
396
查看次数

无法访问Firebase对象属性.值显示为未定义的ANGULARFIRE

我想为我的演示做一个自定义登录,但是我遇到了一个问题.

我使用用户名来访问Firebase中的引用网址,我得到了一个返回的对象.如果我想访问单个属性,我会得到未定义的值,但如果我添加我的html {{returnedObj.name}},则会显示该值.

这是为什么?

angular.module('Demo').controller('loginCtrl', ['$scope', '$firebase', '$location',    function($scope, $firebase, $location){
$scope.user = {};
$scope.check = function(){
    console.log('https://fabritzio-demo.firebaseio.com/users/' + $scope.user.name);
    $scope.returnedObj = $firebase(new Firebase('https://fabritzio-demo.firebaseio.com/usuarios/' + $scope.user.name)).$asObject();
    alert($scope.returnedObj.name); // returns undefined value
};
Run Code Online (Sandbox Code Playgroud)

}]);

angularjs firebase angularfire

4
推荐指数
1
解决办法
3776
查看次数

如何使用AngularFire $ asObject()检查Firebase中是否存在对象?

我正在使用angularFire 0.8.2,我正在尝试检查用户的唯一性.

该用户存储在users/[id]中,其中[id]是用于登录/密码用户的simpleLogin生成的id和用于来自社交网络的社交uid(即:facebook:891239120).

因此,当我使用facebook登录时,我需要检查该用户是否已经在firebase中,所以我正在使用(来自angularFire-seed):

var userData = fbutil.syncObject('users/' + user.uid);
userData.$loaded()
         .then(function (data) {
         if(data) {
              console.log('EXISTS');
              console.log(data.$id);
         } else {
              console.log('NOT EXISTS');
         }
          }, function (err) {
              console.error(err);
          });
Run Code Online (Sandbox Code Playgroud)

但这不起作用,因为始终返回数据对象(即使对象没有关键user.uid不存在)

我发现obj.$ value在obj为空时填充为null,而当obj没有原始值时不存在,但我不确定这是否是检查它的正确方法.

而且我也不知道我是否使用$ asArray on/users它会在firebase上加载每个用户而不是生产它可能会出现性能问题?

angularjs firebase angularfire

4
推荐指数
1
解决办法
5297
查看次数

我应该以角度模拟所有外部服务吗?

我目前正在开始进行角度单元测试.作为我想要的第一个控制器看起来像这样,我感到困惑.

angular.module('sgmPaperApp')
  .controller('AccountCtrl', function ($mdToast, user, $firebaseArray, Ref) {
var vm = this;
vm.data = user;
vm.save = saveUser;
vm.comments = $firebaseArray(Ref.child('comments').orderByChild('person').equalTo(user.$id));


function saveUser() {
  vm.data.$save().then(function () {
    $mdToast.showSimple('Data saved');
  });
}
});
Run Code Online (Sandbox Code Playgroud)

我应该真的模仿我使用的所有外部服务吗?毕竟那个控制器不是很多,那么外部服务和嘲笑firebaseArray可能很困难.

感谢您的建议并帮助我开始测试

unit-testing angularjs angularfire

4
推荐指数
1
解决办法
854
查看次数

来自二级对象的Firebase $ id

所以我在firebase中有这个例子

clients {
   //clients with unique keys {
       invoices: {
         // Invoices with unique Keys
       }
   }
}
Run Code Online (Sandbox Code Playgroud)

我正在用一个ref返回所有这些,如下所示:

.controller('singleClientController', function($scope, $firebaseObject, fbUrl, $routeParams) {

    var id = $routeParams.id;

    var singleRef = new Firebase(fbUrl+'/clients/'+id);
    var client = this;

    client.details = $firebaseObject(singleRef);

})
Run Code Online (Sandbox Code Playgroud)

所以在我的HTML中,我试图返回$id客户端和发票.我能够让客户端没有问题{{client.details.$id}}但是当我尝试用发票ID {{invoice.$id}}做同样的事情时我什么也得不到.

发票通过foreach显示如下:

<tr ng-repeat="invoice in client.details.invoices">
     <td>
         <a href="#/invoices/details/{{invoice.$id}}/{{client.details.$id}}">
            {{invoice.settings.number}}
         </a>
     </td>
     ...
</tr>
Run Code Online (Sandbox Code Playgroud)

是因为发票在客户内吗?如果是这样,您将如何返回发票的ID?这让我疯了!请帮忙!

为了更好地理解我的firebase设置,这里是我正在谈论的截图.

在此输入图像描述

javascript angularjs firebase angularfire

4
推荐指数
1
解决办法
719
查看次数

更新firebase中的用户信息

我在其最新版本使用angularFire 2.0.1,但我看到关于如何更新信息"显示名"信息尝试获取用户信息firebase.User(),但我得到的错误"getApi"我是被误导quisas如何更新用户创建的信息前

firebase angularfire firebase-authentication

4
推荐指数
1
解决办法
2847
查看次数

错误:找不到reCAPTCHA容器或已包含内部元素

我正在尝试使用Ionic2/typescript进行电话号码身份验证,并初始化recaptcha验证程序,如下所示:

.ts文件

    import firebase from 'firebase';

     @IonicPage()
     @Component({
       selector: 'page-login',
       templateUrl: 'login.html',
     })

     export class LoginPage {

    public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
           constructor(afAuth: AngularFireAuth, public authData: AuthProvider, public alertController: AlertController, formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams) {
             this.loginForm = formBuilder.group({
               phone: ['', Validators.compose([Validators.required, 
                 Validator.isValidPhone])]
             });
             try {
               this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
             }catch(e){
               console.log("There was a problem in initializing the recapctha verifier: " + e);
             }
             this.authData.recaptchaVerifier = this.recaptchaVerifier;
           }
}
Run Code Online (Sandbox Code Playgroud)

.html文件

<ion-content padding>
  <div id="recaptcha-container"></div>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate> …
Run Code Online (Sandbox Code Playgroud)

firebase angularfire firebase-authentication ionic2 ionic3

4
推荐指数
3
解决办法
5490
查看次数

Angular 5 AngularFire Firebase登录闪烁

我正在使用AngularFire2创建具有Firebase和Angular 5的登录系统。单击登录并注销后,一切正常。一个问题是,如果刷新页面,如下图所示,我会闪烁。显然,发生这种情况是因为javascript需要花费一些时间来加载。解决此问题的最佳方法是什么?通常,我使用PHP或其他后端语言创建登录系统,所以我永远不会遇到这个问题,因为我只检查SESSION变量进行登录,而页面直到完成才加载完成。在此页面立即加载,然后Javascript检查您是否已登录。

我知道我可以使用加载微调器,但我不喜欢使用该技巧的网站。另一种可能性是使用Javascript Cookie或JWT。我只想找出最佳做法。

另外,使用Firebase和Angular的登录系统是否也不安全,因为用户可以只更改Javascript变量?例如,用户可以设置afAuth.user。私人用户仪表板检查是否设置了此变量,并让用户查看此页面(如果已设置)。因此,有人不能通过设置afAuth.user变量进入私有仪表板。我了解我可以使用规则保护Firebase数据,并可以确保用户在访问数据库之前已登录。但是,如果您使用Firebase对前端Javascript进行身份验证,似乎无法对用户隐藏HTML代码。

在此处输入图片说明

这是 app.component.html

<div *ngIf="afAuth.user | async as user; else showLogin">
  <h1>Hello {{ user.displayName }}!</h1>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

我的app.component.ts档案是

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase/app';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title …
Run Code Online (Sandbox Code Playgroud)

firebase angularfire firebase-authentication angular

4
推荐指数
1
解决办法
518
查看次数