Angular，未引用来自工厂的对象

Question

我有一个 AngularJS-具有不同控制器的应用程序。

这些控制器应该共享一些数据，我想到了为此使用工厂：

angular.module('myApp').factory('myService', ['$http', 'dataService' function ($http, dataService) {
    var sharedData = {
        myData: null
    };

    var _loadData = function(){
        dataService.getData().then(
            function (response) {
                this.sharedData.myData = response.data;
            },
            function (response) {
                //error-message
            }
        );
    };

    return {
        myData : sharedData,
        initData: _loadData()
    };
}]);

在我的控制器中，我想像这样设置和获取数据：

$scope.init = function (){
    $scope.myData = myService;
    myService.initData();
};

初始化当然只会由一个控制器执行。

遗憾的是，即使从数据服务正确接收到数据，这也不起作用。

如果我在我的控制器中调用数据服务，然后将其保存到工厂，一切都会按预期工作：

$scope.init = function (){
    $scope.myData = myService;
    dataService.getData().then(
        function (response) {
            myService.myData = response.data;
        },
        function (response) {
            //error-message
        }
    );
};

为什么会这样？我怎样才能将查询逻辑移动到工厂并且仍然有一个对共享数据对象的引用，只要它发生变化，它就会在所有引用控制器中更新？

Answer 1

为了绑定相同的数据并使 angular 监视列表正确监视您的更改，您应该在工厂中使用类似 getter 的功能，在控制器中 link $scope 的函数仅通过引用，在你的 HTML 中你调用这个函数来获取数据。

检查此 fiddle：fiddle

myApp.factory('myService',[function(){
    var _someData = {
        foo: "bar"
    };

    return {
       getData: function() {
         return _someData;
       },
       setData: function(data) {
        _someData = data;
       }
     }
  }]);

myApp.controller('mainCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.data = myService.getData;
    $scope.setData = function () {
        myService.setData({from: 'mainCtrl'});
    };
}]);

myApp.controller('anotherCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.data = myService.getData;
    $scope.setData = function () {
        myService.setData({from: 'anotherCtrl'});
    };
}]);

在你的HTML中：

<div>{{data()}}</div>

Answer 2

这是演示解决方案的有效 jsfiddle

https://jsfiddle.net/u48vcw09/3/

基本上你有

angular.module('myApp').factory('myService', ['dataService', function(dataService) {
    var that = {};
  that.sharedData = {};

  that.initData = function _loadData() {
    dataService.getData().then(function(data) {
        that.sharedData.data = response.data;
    });
  };

  that.initData();

  return that;
}]);

这是控制器：

angular.module('myApp').controller('SampleCtrl',
  ['$scope', 'myService', function($scope, myService) {
    $scope.init = function() {
      $scope.sharedData = myService.sharedData;
    };

    $scope.init();
}]);

如果可以，最好从工厂代码本身加载数据。

如果这不能回答您的问题，请告诉我。

Angular，未引用来自工厂的对象

Angular, object from factory not referenced

api

factory

angularjs