Angular list detail view with firebase autogenerated id

问题

I'm trying to load some names from a firebase to my list view and then when I click on any of the items it shows the name on the next view using the autogenerated id inside firebase for the respective name. Here's my code:

controllers.js:

angular.module('starter.controllers', [])

.controller('ListCtrl', function($scope, UserService) {
  var listAllUsers=function(){
    UserService.listAll().then(function(users){
        $scope.list=users;
    });
  }

  listAllUsers();
})

.controller('DetailCtrl', function($scope, $stateParams, UserService) {

    UserService.listById($stateParams.listId).then(function(user){
      $scope.user=user;
    });
    console.log($stateParams.listId);


});

services.js:

angular.module('starter.services', [])

.factory('UserService', function($q, $firebaseArray) {

    var ref = new Firebase('https://list-detail-001.firebaseIO.com/users')

    var Users=$firebaseArray(ref);

    return {
        listAll:function(){
            var deferred=$q.defer();
            deferred.resolve(Users);
            return deferred.promise;
        },

        listById:function(userId){
            var deferred=$q.defer();
            var user=Users[userId];
            deferred.resolve(user);
            return deferred.promise;
        }
    };
});

list.html:

<ion-view view-title="Lists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="listitem in list" href="#/{{listitem.$id}}">
        {{listitem.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

detail.html:

<ion-view view-title="Details">
  <ion-content>
    <h1>{{user.title}}</h1>
  </ion-content>
</ion-view>

As you can see, the app is fairly simple. The data works if its in a simple json array, but I cannot seem to get the details page to just display the user.title property. I'm probably missing something really simple. Can anyone please help? I'm guessing the issue in my code has to do with either the listById() function in my services.js or my DetailCtrl in my controller.js. But I don't know what. I'm getting the correct ID from my database in the $stateParams.listId parameter but from there on, my $scope.users is undefined. Please help!

回答1:

Ok I fixed the issue. Now everything works. I wanted to keep the promises because I'm a bit paranoid and I don't want a situation where my data is large, and my UI suffers becasue of it.

controllers.js:

.controller('ListCtrl', function($scope, UserService) {
  var listAllUsers=function(){
    UserService.listAll().then(function(users){
        $scope.list=users;
    });
  }

  listAllUsers();
})

.controller('DetailCtrl', function($scope, $stateParams, UserService) {

    UserService.listById($stateParams.listId).then(function(user){
      $scope.user=user;
    });
});

services.js

angular.module('starter.services', [])

.factory('UserService', function($q, $firebaseArray,$firebaseObject) {

    var ref = new Firebase('https://list-detail-001.firebaseIO.com/users')

    var Users=$firebaseArray(ref);

    return {
        listAll:function(){
            var deferred=$q.defer();
            deferred.resolve(Users);
            return deferred.promise;
        },

        listById:function(key){
            var deferred=$q.defer();
            var userRef= ref.child(key);
            var user=$firebaseObject(userRef);
            deferred.resolve(user);
            return deferred.promise;
        }
    };
});

来源：https://stackoverflow.com/questions/30504224/angular-list-detail-view-with-firebase-autogenerated-id