Question

我是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;
});

并在index.html中放置了一个div：

<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

Answer 1

您仅使用Firebase JavaScript库，而不是AngularFire。 AngularFire构建于Firebase JS库和Angular之上。 AngularFire执行许多有用的操作，例如，自动同步objects和arrays（您可能需要检查数组示例）。 AngularFire还正确处理$scope.apply。这样，任何更新都将应用于视图。

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

<强> Plunker

  $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文档一个很好的阅读。它将为您节省大量的项目时间。

使用AngularFire创建用户并调用factory来显示通知

1 个答案: