While navigating to a page, data is not getting pre-filled

Question

I am getting the data in the controller from firebase database using angularfire api and updating the profile.user object from that data.

Now the problem is After login when I am routing to profile.html page, data is not getting pre-filled for that user in the fields which he had saved earlier in the database.

Thank you.

//The controller code is:
.controller('ProfileController', function($rootScope, $timeout, $location, authObj, fbRef) {
var profile = this;

// Check the current user
var user = authObj.$getAuth();

// If no current user send to register page
if (!user) {
    $location.path('/register');
    return;
}

var userRef = fbRef.child('users').child(user.uid);    
(function init() {
    // show the message if User moves to profile page
    $rootScope.alertInfo = {
        title: 'You are successfully logged in!!',
        detail: 'You are still logged in',
        className: 'alert alert-success'
    };

    // Load user info
    userRef.once('value', function(snap) {
        profile.user = snap.val();
        if (!profile.user) {
            return;
        }
    });
})();

profile.updateProfile = function() {
    userRef.set(profile.user, function onComplete() {

        // show the message if write is successful
        $rootScope.alertInfo = {
            title: 'Successfully saved!',
            detail: 'You are still logged in',
            className: 'alert alert-success'
        };
    });
};

})

Corresponding route for this controller is:

 .when('/profile', {
  controller:'ProfileController as profile',
  templateUrl:'view/profile.html'
})

View for this controller is(profile.html):

<form id="frmProfile" role="form">
<h2>Profile</h2>

<br />
<div class="form-group">
    <label for="txtName">Name</label>
    <input type="text" ng-model="profile.user.name" class="form-control" id="txtName" placeholder="Name" name="name" />
</div>
<div class="form-group">
    <label for="ddlDino">Favorite Dinosaur</label>
    <select id="ddlDino" ng-model="profile.user.favoriteDinosaur" name="favoriteDinosaur" class="form-control">
        <option>None</option>
        <option>Pteranodon</option>
        <option>Lambeosaurus</option>
        <option>Stegosaurus</option>
        <option>Daspletosaurus</option>
    </select>
</div>
<button type="submit" ng-click="profile.updateProfile(profile.user)" class="btn btn-primary">Update</button>

Not entirely certain, but it looks dodge to use `var profile = this` when using profile in the controller constructor. `this !== $scope` during construction. See http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — Dan, May 08 '16 at 06:45
I removed var profile = this. and only used $scope but it is not working. — user2511593, May 08 '16 at 07:27
Sorry I completely missed it the first time - once is asynchronous, and angular has no idea anything's changed when the the data returns. You need to add a $scope.$apply() inside the callback to update the view. — Dan, May 08 '16 at 13:17

score 0 · Accepted Answer · answered May 09 '16 at 15:22

FirebaseRef.once is asynchronous and angular has no way of knowing it should digest when the data returns. You need to add $rootScope.$apply() inside the callback to update your program when the data returns. Alternatively, it is recommended to use AngularFire which will handle this type of thing for you.

// Load user info
    userRef.once('value', function(snap) {
        profile.user = snap.val();
        if (!profile.user) {
            return;
        }
        $rootScope.$apply()
    });

While navigating to a page, data is not getting pre-filled

1 Answers1