用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文檔很好看。它會爲您節省相當數量的時間在您的項目中。