角度、工場からのオブジェクトは参照されていません

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

もちろんinitは1つのコントローラでのみ実行されます。

悲しいことに、悲しいことに、データがdataServiceから正しく受信されても​​、これは機能しません。

私は工場のすべてにそれ安全なその後、私のコントローラでのDataServiceを呼び出すと場合、期待どおりに動作します

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

なぜそれが起こるのでしょうか？どのように私は工場にクエリロジックを移動し、変更するたびにすべての再描画コントローラで更新されるsharedDataオブジェクトへの参照を持っていますか？

Answer 1

同じデータをバインドして変更をウォッチリストで正確に監視するには、工場でゲッターのような関数を使用する必要があります。コントローラーでは関数を参照のみで$ scopeにリンクし、 HTMLこの関数を呼び出してデータを取得します。

チェックこのフィドル：あなたの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'}); 
    }; 
}]); 

：

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

Answer 2

ここでは、ソリューション

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

をデモ作業jsfiddleは基本的にあなたが

を持っています

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

    $scope.init(); 
}]); 

することができます場合は、工場出荷時のコード自体の中からあなたのデータをロードするのが最善です：

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

そして、ここでは、コントローラです。

これがあなたの質問に答えることができない場合は教えてください。