使用AngularFire创建用户并调用工厂以显示通知

Create User with AngularFire and call factory to display notifications

本文关键字：工厂 显示 通知 调用 AngularFire 创建 用户 使用      更新时间：2023-09-26

我是AngularJS的新手，并尝试将其与AngularFire/Firebase结合使用来存储一些项目数据。我建立了一个工厂，它应该处理通知以将它们显示在一个中心位置。工厂看起来像这样：

myApp.factory("AlertService", function($timeout){
  var alerts = new Array();
  var addAlert = function(type, message){
    alerts.push({
      type: type,
      msg: message
    });
    $timeout(function(){
      removeAlert(alerts.length - 1);
    }, 3000);
  }
  var removeAlert = function(index){
    alerts.splice(index, 1);
  }
  return{
    alerts : alerts,
    addSuccessAlert : function(message){
      addAlert("success", message);
    },
    addDangerAlert : function(message){
      addAlert("danger", message);
    },
    deleteAlert : function(index){
      removeAlert(index);
    }
  };
});

绑定我使用的控制器中的数据$watch

$scope.$watch( function () { return AlertService.alerts; }, function ( alerts ) {
  $scope.alerts = AlertService.alerts;
});

并且刚刚在索引中放置了一个div.html：

<div id="alert">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}">{{alert.msg}}</alert>
</div>

如果我从控制器中调用AlertService.addWarningAlert("Your password is not identical");，这是完全有效的。但是，如果我现在尝试在 firebase 中创建用户后显示通知，则数据绑定不会更新（仅更新数组）。这就是我创建用户的方式：

var ref = new Firebase("https://xyz.firebaseio.com/"); 
ref.createUser({
  email    : $scope.data.suEmail,
  password : $scope.data.suPassword
}, function(error) {
  if (error === null) {
    console.log("User created successfully");
    AlertService.addSuccessAlert("User created successfully");
  } else {
    console.log("Error creating user:", error);
    AlertService.addWarningAlert("Error creating user");
  }
});

知道我（愚蠢地）做错了什么吗？提前感谢！

编辑：这里 plnkr http://plnkr.co/edit/jSaJ5EzZ5MGRPFzhbGJg?p=preview

您只使用 Firebase JavaScript 库，而不是 AngularFire。AngularFire建立在Firebase JS库和Angular之上。AngularFire做了很多有用的事情，例如自动同步对象和数组（您可能想在数组示例中查看一下）。AngularFire也可以正确处理$scope.apply。这样，所有更新都将应用于视图。

如果您选择不使用 AngularFire，则需要将更新视图的代码部分包装在 $timeout 服务中。

普伦克 

  $scope.createUser = function(){
    ref.createUser({
        email    : "a.b@c.com",
        password : "mypassword"
      }, function(error) {
        // this will update the view because it's wrapped in $timeout
        $timeout(function() {
          if (error === null) {
            console.log("User created successfully");
            AlertService.addSuccessAlert("User created successfully");
          } else {
            console.log("Error creating user:", error);
            AlertService.addWarningAlert("Error while creating user");
          }
        });
      });
  }

我强烈建议好好阅读一下AngularFire文档。它将为您的项目节省大量时间。

相关文章：