Question

我有一个带有不同控制器的AngularJS-Application。

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

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();
};

init当然只能由一个控制器执行。

遗憾的是，即使从dataService正确接收数据，这也无法正常工作。

如果我在控制器中调用dataservice然后将其安全到工厂，一切都按预期工作：

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

为什么会这样？如何将查询逻辑移至工厂并仍然具有对sharedData-object的引用，该对象将在所有更新后的控制器中更新？

Answer 1

为了绑定相同的数据并使角度观察列表能够正确地观察您的更改，您应该在工厂中使用类似getter的函数，在控制器中仅通过引用将函数链接到$ scope，并在HTML中你调用这个函数来获取数据。

检查这个小提琴：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，来自工厂的对象未引用

2 个答案: