javascript - 使用工厂的 Angular 服务，数据正确但未显示在 UI 上

Question

到目前为止这是 the complete source

angular
.module('app')
.factory('Friends', ['$http',function($http){
    return {
        get: function(){
            return $http.get('api/friends.json')
              .then(function(response){
                alert(JSON.stringify( response.data));
                return response.data;
              });
        }
    };
}])

Controller :

angular.module("app")
.controller('homeCtrl',['$scope','Friends',
    function($scope, Friends){
            $scope.title = "Welcome";
            $scope.items=["2016","2015", "2014"];
            $scope.friends = Friends.get();
            $scope.save = function(){
                $http.post('/api/friends', friends);
            }

          }])

$stateProvider
        .state('home',{
          url:'/',
          templateUrl:'templates/home.html',
          controller: 'homeCtrl',
          resolve : {
            friends:['Friends', function(Friends){
            return Friends.get();
          }]
          }
        })

当我尝试提醒它时的结果:

用户界面空白:

*我的导航栏 ddl 不起作用，该怎么办？

Answer 1

Friends.get() 返回一个 promise 。您必须使用 then 方法:

Friends.get().then(function(data) { $scope.friends = data; }); //instead of  $scope.friends = Friends.get();