javascript - 使用 2 个 Controller 管理工厂 JSON $http 数据

Question

我正在尝试获取 factory JSON 响应，将其保存在变量中，以便准备好从 2 个不同的 controllers.

下面我粘贴我正在使用的代码:

storyFactory.js

var story = angular.module('story.services', []);

story.factory('storyAudio', [ '$http', function ($http) {

  var json = {};

  function getJSON(story_id, callback) {  
    $http({
      url: 'https://api.domain.co/get/' + story_id,
      method: "GET"
    }).success(function (data) {
      json = data;
      callback(data);        
    });
  };

  return {  
    getSubaudios: function(story_id, callback) {
      getJSON(story_id, function(result) {
        callback(result);
      });
    },
    getTopbar: function(callback) {
      callback(json);
    }
  };
}]);

StoryCtrl.js

var storyCtrl = angular.module('story', ['story.services']);

storyCtrl.controller('storyCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {

  var data = this;
  data.story = {};

  storyAudio.getSubvideos($stateParams.story_id, function(response) {
    data.story = response;
  });

}]);

TopbarCtrl.js

var topbarCtrl = angular.module('topbar', ['story.services']);

topbarCtrl.controller('topbarCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {
  var data2 = this;
  data2.story = {};

  storyAudio.getTopbar(function(response) {
    data2.story = response;
  });    
}]);

问题出在我的 TopbarCtrl 响应中，当我在 HTML 中调用它时，我收到一个空的 data2.story。

原因是因为它没有 $http 响应的回调，所以它打印了带有实际状态的 var json ，这是一个空对象.

当变量有内容时如何加载第二个 Controller ？

感谢您的建议。

Answer 1

我认为在这种情况下您能做的最好的事情就是通过 getSubaudios 加载数据并提供数据引用以供其他 Controller 使用。像这样的事情...

story.factory('storyAudio', function($http) {
    var factory = {
        story: {}
    };

    factory.getSubaudios = function(story_id) {
        return $http.get('https://api.domain.co/get/' + story_id).then(function(response) {
            return angular.extend(factory.story, response.data);
        });
    };

    return factory;
})

使用angular.extend()不是直接为工厂的 story 属性赋值，而是维护在加载数据之前可能建立的任何引用。

然后你可以通过加载数据

storyCtrl.controller('storyCtrl', function(storyAudio) {
    var data = this;
    storyAudio.getSubaudios($stateParams.story_id).then(function(story) {
        data.story = story;
    });
})

并通过 Controller 中的引用直接引用故事数据

topbarCtrl.controller('topbarCtrl', function(storyAudio) {
    this.story = storyAudio.story;
})