CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfireangular-promise
andinho
andinho

Reputation: 33

Create User with AngularFire and call factory to display notifications

I'm new to AngularJS and trying to use it in combination with AngularFire/Firebase to store some project data. I build a factory which should handle notifications to display them on a central location. The factory looks like this:

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

Binding the data in the controller I used $watch

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

and just placed a div in the index.html:

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

This is perfectly working if I call AlertService.addWarningAlert("Your password is not identical"); from within a controller. But if I now try to display a notification after creating a user in firebase the databinding is not getting updated (only the array). Thats how I create the user:

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

Any idea what I'm (stupidly) doing wrong? Thanks in advance!

Edit: Here the Plnkr http://plnkr.co/edit/jSaJ5EzZ5MGRPFzhbGJg?p=preview

Upvotes: 2

Views: 389

Answers (1)

David East
David East

Reputation: 32624

You are only using the Firebase JavaScript library and not AngularFire. AngularFire is built on top of the Firebase JS library and Angular. AngularFire does a lot of useful things such as, auto synchronizing objects and arrays (you might want to check that out for your array example). AngularFire also handles $scope.apply properly. This way any updates are applied to the view.

If you choose not use AngularFire, you'll need to wrap the parts of your code that update the view in the $timeout service.

Plunker

  $scope.createUser = function(){
    ref.createUser({
        email    : "[email protected]",
        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");
          }
        });

      });
  }

I highly recommend giving the AngularFire docs a good read. It will save you a fair amount of time in your project.

Upvotes: 5

Related Questions