用AngularFire创建用户并致电工厂以显示通知

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

控制器绑定数据我用$看

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

，只是放在一个div中的index.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

Answer 1

您只使用火力地堡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文档很好看。它会为您节省相当数量的时间在您的项目中。