コントローラ間でデータを共有するAngularJS

Question

コントローラ1からコントローラ2にオブジェクトで満たされた配列を送信しようとしていますが、コントローラ2に入るのは空の配列です。私が満たしたものを得る唯一の方法は、私のサービスで静的な配列を作成するときです。データを設定します

マイサービス

app.service('myData', function() { 
this.myData = []; 

this.addData = function(data) { 
    this.myData.push(data); 
} 
this.getData = function() { 
    return this.myData; 
}}); 

コントローラ1

app.controller('controller1',['$scope', 'myData', function($scope, myData) { 
    $scope.addData = function(index, name) { 
     myData.addData({index: index, name: name}); 
    }}]); 

私は質問の多くを発見した答えを探していたときコントローラ2は、この

app.controller('controller2',['$scope', 'myData', function($scope, myData) { 

$scope.myData = myData.getData(); 
$scope.$watch('myData.getData()', function(data){ 
    console.log(data); 
}); 
console.log($scope.myData);}]); 

のように見えますほとんど私に似ています。唯一の違いは、静的なサービスを作成するのではなく、私のコントローラから私のサービスを満たすことでした。

私の両方のconsole.logsは空の配列を返します。どうしてこれなの？

Answer 1

$watchの式は、関数（see the docs for $watch）である必要があります。 $watchに文字列を指定すると、$scopeのプロパティを検査するようにAngularに指示します。これと同様に、サービスを文字列'data.getData()'の 'data'として誤って参照しています。

1）myData#getDataの結果を見る：

$scope.$watch(function() { 
    return myData.getData(); 
}, function (data) { 
    console.log(data); 
}); 

2）$scopeにmyDataサービスの内部配列への参照を見る：

$scope.myData = myData.getData(); 
$scope.$watch('myData', function (data) { 
    console.log(data); 
}); 

Answer 2

あなたからaddDataを呼び出す場合、それが動作するはずです例えば、第1コントローラ：

JSFiddle

.controller('tourCtrl', ['$scope', 'myData', function ($scope, myData) { 
    $scope.addData = function (index, name) { 
     myData.addData({ 
      index: index, 
      name: name 
     }); 
    } 
    $scope.addData('hello', 'world'); 
}]) 
.controller('controller2', ['$scope', 'myData', function ($scope, myData) { 

    $scope.myData = myData.getData(); 
    $scope.$watch('myData', function (data) { 
     console.log(data); 
    }); 
    console.log($scope.myData); 
}]); 

Answer 3

私はpubsubメカニズムのようなものを使用することをお勧めします。データがいつ表示されるかはわかりません。機能の監視は高価な操作です。あなたのサービスでPubSubのメカニズムを構築することができます。

コントローラーがイベントに登録し、別のコントローラーがそのイベントを公開する可能性があります。最低限のリソースで、あなたが望むものを達成することができます。ここ

は別のアプローチは、Observerパターンを用いることであろうサンプル

app.factory('pubSubService', [function() { 
var pubSubAPI = {}; 
var hooks = []; 

pubSubAPI.publishEvent = function(message) { 
    for (var i = 0; i < hooks.length; i++) { 
     hooks[i](message); 
    } 
}; 

pubSubAPI.subscribeEvent = function(eventFunction) { 

    hooks.push(eventFunction); 
}; 

return pubSubAPI; 
}]); 

Answer 4

で、まったく$watchを使う必要がなくなります。

app.service('myData', function() { 
    this.myData = []; 
    var observers = []; 
    var self = this; 

    this.addObserver = function (callback) { 
     observers.push(callback); 
    }; 

    var notifyObservers = function() { 
     angular.forEach(observers, function (callback) { 
      callback(self.myData); 
     }); 
    }; 


    this.addData = function (data) { 
     this.myData.push(data); 
     notifyObservers(); 

    } 
}); 


app.controller('controller2', ['$scope', 'myData', function ($scope, myData) { 

    myData.registerObserverCallback(function (data) { 
     $scope.myData = data; 
     console.log(data); 
    }); 
}]);