Javascript AngularJS异步数据未按承诺显示

当我打开应用程序时，我没有从控制器获取任何数据，尽管

console.log（$http…

将为我提供所需数据的数组。似乎在调用

$http

之前加载了控制器中的以下代码

ActivityService.getAll().then(function(data){
    this.data = data
})

这是我的档案：

_home.html

<h1>This is the Home page</h1>
<div>{{msg}}</div>
<div>{{data}}</div>

MainCtrl.js

(function() {

function MainCtrl($scope, ActivityService) {
    this.msg = "hello wROLD"
    ActivityService.getAll().then(function(data){
        this.data = data
    })
}

angular
    .module('ProTrak')
    .controller('MainCtrl', ['ActivityService', MainCtrl]);

 })();

ActivityService.js

(function() {

  function ActivityService($http) {

    ActivityService.getAll = function() {
      return $http({
        url: '/activities.json',
        method: 'GET'
      });
    }
    return ActivityService
  }

  angular
    .module('ProTrak')
    .factory('ActivityService', ['$http', ActivityService]);
  }
)();

(function() {

  function ActivityService($http) {

    ActivityService.getAll = function() {
      return $http({
        url: '/activities.json',
        method: 'GET'
      });
    }
    return ActivityService
  }

  angular
    .module('ProTrak')
    .factory('ActivityService', ['$http', ActivityService]);
  }
)();

在后端，我认为它可以工作，因为我可以

console.log

数据。访问此URL时，我得到了正确的

json

http://localhost:3000/activities.json

[{"id":1,"title":"first","description":"hello world","created_at":"2017-03-05T22:43:08.356Z","updated_at":"2017-03-05T22:43:08.356Z","workouts":[]},{"id":2,"title":"first","description":"hello world","created_at":"2017-03-05T22:43:38.313Z","updated_at":"2017-03-05T22:43:38.313Z","workouts":[]}]

Gemfile

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.6'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

gem 'angular_rails_csrf'
gem 'angular-rails-templates'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'responders', '~> 2.0'
# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :production do
    gem 'pg'
    gem 'rails_12factor'
end


group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

app.js

 (function() {
   function config($stateProvider, $urlRouterProvider) {

     $stateProvider
     .state('home', {
            url: '/home',
            templateUrl: 'main/_home.html',
            controller: 'MainCtrl as main',
            resolve: {
                activitiesPromise: function(ActivityService){
                  return ActivityService.getAll();
                }
            }
        })

     $urlRouterProvider.otherwise('home')
 }

 angular
     .module('ProTrak', ['ui.router', 'templates'])
     .config(config);
 })();

 (function() {
   function config($stateProvider, $urlRouterProvider) {

     $stateProvider
     .state('home', {
            url: '/home',
            templateUrl: 'main/_home.html',
            controller: 'MainCtrl',
            resolve: {
                activitiesPromise: ['ActivityService', function(ActivityService){
                    return ActivityService.getAll();
                }]
            }
        })

     $urlRouterProvider.otherwise('home')
 }

 angular
     .module('ProTrak', ['ui.router', 'templates'])
     .config(config);
 })();

ActivityService.js

(function() {

  function ActivityService($http) {

    ActivityService.getAll = function() {
      return $http({
        url: '/activities.json',
        method: 'GET'
      });
    }
    return ActivityService
  }

  angular
    .module('ProTrak')
    .factory('ActivityService', ['$http', ActivityService]);
  }
)();

(function() {

  function ActivityService($http) {

    ActivityService.getAll = function() {
      return $http({
        url: '/activities.json',
        method: 'GET'
      });
    }
    return ActivityService
  }

  angular
    .module('ProTrak')
    .factory('ActivityService', ['$http', ActivityService]);
  }
)();

---

问题是由于您在以下位置执行了错误的依赖项注入：

(function() {

function MainCtrl($scope, ActivityService) {  // <-- First param is $scope
    this.msg = "hello wROLD"
    ActivityService.getAll().then(function(data){
        this.data = data
    })
}

angular
    .module('ProTrak')
    .controller('MainCtrl', ['ActivityService', MainCtrl]); // <-- First dependency injecttion is ActivityService

 })();

2:

---

我认为你在

app.js

中的解决方案存在注入问题。试着这样解决

activitiesPromise: ['ActivityService', function(ActivityService){
    return ActivityService.getAll();
}]

---

使用此模式将更好地工作，并将解决此问题

“ActivityService.getAll”不可见，因此通过修复错误的依赖项注入解决了问题？是的，

$scope

存在问题。谢谢，这修复了部分问题。我希望从我的

home.html

文件中的

{{main.data}}

返回一些内容。目前，我没有得到任何东西。我试图

console.log（$http（{url:'/activities.json'，method:'GET'}）；）

，我确实从中得到了一个响应，其中包括一个包含我所需对象的数组。我看到您正在使用

$stateProvider

解析

ActivityService.getAll（）

数据。那你为什么要在你的

MainCtrl

工厂中注入

ActivityService

？我更新了我的答案，其中提到了你应该如何更改

MainCtrl

控制器功能。这很有趣，因为当我有

控制器（'MainCtrl'，['ActivityService'，MainCtrl]）时它不起作用，但它与
.controller（'MainCtrl'，['activitiesPromise'，MainCtrl]）一起工作@leogogesger，这是因为解析中的内容可以直接注入控制器。另外，我的回答是您解决的问题之一：）
(function() {

    function MainCtrl(activitiesPromise) {  // <-- Added activitiesPromise resolved data
        this.msg = "hello wROLD";
        this.data = activitiesPromise.data;
    }

    angular
        .module('ProTrak')
        .controller('MainCtrl', ['activitiesPromise', MainCtrl]);

 })();

activitiesPromise: ['ActivityService', function(ActivityService){
    return ActivityService.getAll();
}]

angular.module('ProTrak')
  .service('ActivityService', function ($http, ENV) {

    this.getAll = function ($username) {    
       return $http({
        url: '/activities.json',
        method: 'GET'
      });
    };

}