Modelli angularJS, più ambiti $ e associazione dati bidirezionale

Question

Mi piace che AngularJS non richieda e la sintassi speciale per Modelli, ma c'è uno scenario che non riesco a capire. Prendiamo il seguente

miei avvolge Dataservice qualunque sapore di archiviazione dei dati che sto utilizzando:

app.factory('dataService', function() { 
    var data = 'Foo Bar'; 

    return { 
     getData: function() { 
      return data; 
     } 
    }; 
}); 

ho due controller che sia l'accesso lo stesso pezzo di dati:

app.controller('display', function($scope, dataService) { 
    $scope.data = dataService.getData(); 
}); 

app.controller('editor', function($scope, dataService) { 
    $scope.data = dataService.getData(); 
}); 

Se dunque io hanno due visualizzazioni, una delle quali modifica i dati, perché l'altro aggiornamento non viene eseguito automaticamente?

<div ng-controller="display"> 
<p>{{data}}</p> 
</div> 

<div ng-controller="editor"> 
<input type="text" value="{{data}}"/> 
</div> 

capisco come questo sta lavorando in qualcosa come Knockout dove sarei costretto a fare i dati di un oggetto osservabile ad eliminazione diretta. Pertanto, qualsiasi modifica in una parte dell'applicazione attiva le sottoscrizioni e aggiorna le visualizzazioni in un'altra. Ma non sono sicuro di come farlo in Angular.

Qualche consiglio?

Answer 1

Ci sono alcuni cambiamenti che suggerirei di farlo funzionare.

1. modificare l'oggetto di dati da una stringa di opporsi tipo
2. Usa ng-model per legare il campo di input

HTML

<div ng-controller="display"> 
    <p>{{data.message}}</p> 
</div> 

<div ng-controller="editor"> 
    <input type="text" ng-model="data.message"/> 
</div> 

Script

app.factory('dataService', function() { 
    var data = {message: 'Foo Bar'}; 

    return { 
     getData: function() { 
      return data; 
     } 
    }; 
}); 

Demo: Fiddle

Answer 2

Non sono stato bloccato con la stessa situazione, ma la cosa che mi salta fuori è quello che stai conficcando nel mirino. C'era un video angolare in cui è stato discusso l'ambito. È necessario inserire gli oggetti del modello nell'ambito e non utilizzare l'ambito come oggetto del modello.

Nell'esempio verranno creati due ambiti ciascuno con la stringa data. Poiché data è una stringa non modificabile, verrà sostituita nell'ambito di modifica quando viene modificata. Nel tuo esempio se hai dataService restituisci un oggetto e quell'oggetto è condiviso tra i controller, allora i tuoi problemi potrebbero essere risolti. Prova ad avere dataService restituire model di {data: data} e associare a model.data anziché a data.

Questo non è verificato, ma dovrebbe funzionare in base a come conosco le opere angolari.