Condivisione dei dati tra i controller AngularJS

Question

Sto provando a inviare un array pieno di oggetti dal controller 1 al controller 2. Ma tutto ciò che ottengo nel controller 2 è un array vuoto. L'unico modo per ottenerne uno pieno è quando creo un array statico nel mio servizio.

Il mio servizio

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

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

regolatore 1, che imposta i dati

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

controller 2 si presenta così

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

Quando ero alla ricerca di una risposta che ho trovato un sacco di domande quasi simile al mio. L'unica differenza era che riempio il mio servizio dal mio controller invece di creare un servizio statico.

Entrambi i miei console.logs restituiscono un array vuoto. Perchè è questo?

Answer 1

L'espressione $watch deve essere una funzione (see the docs for $watch). Dando $watch una stringa dice a Angular di ispezionare una proprietà su $scope. Oltre a ciò, hai erroneamente fatto riferimento al servizio myData come "dati" nella stringa 'data.getData()'.

1) Guarda il risultato di myData#getData:

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

2) Guarda il riferimento alla matrice interna del servizio di myData su $scope:

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

Answer 2

Si dovrebbe funzionare se si chiama il addData dal primo controller ad esempio:

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

Suggerisco di utilizzare qualcosa come meccanismo di Pubub. non puoi sapere quando verranno visualizzati i dati. e osservare una funzione è un'operazione costosa. Puoi creare un meccanismo PubSub sul tuo servizio.

Un controller potrebbe registrarsi per un evento e un altro potrebbe pubblicare quell'evento. quindi con risorse minime potresti ottenere quello che vuoi.

Ecco un esempio

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

un altro approccio sarebbe quello di utilizzare il pattern Observer, salva dover utilizzare il $watch affatto:

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