Modele AngularJS, wiele zakresów i dwukierunkowe powiązanie danych

Question

Podoba mi się, że AngularJS nie wymaga specjalnej składni dla modeli, ale istnieje jeden scenariusz, który nie może się objąć. Podjąć następujące

moich dataService okłady cokolwiek smak przechowywania danych Używam:

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

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

Mam dwa kontrolery, że zarówno dostępu do tego samego kawałka danych:

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

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

Jeśli następnie mieć dwa widoki, z których jeden modyfikuje dane, dlaczego druga aktualizacja nie jest automatyczna?

Rozumiem, jak działa to w stylu Knockout, w którym byłbym zmuszony uczynić z danych obiekt obserwowalny nokaut. Więc wszelkie modyfikacje w jednej części aplikacji wyzwalają subskrypcje i aktualizują widoki w innej. Ale nie jestem pewien, jak sobie z tym poradzić w Angular.

Każda rada?

Answer 1

Jest kilka zmian, które sugerowałbym, aby działały.

1. zmiana obiekt danych z ciągiem do obiektu typu
2. Zastosowanie ng-model związać polu wprowadzania

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

Nie utknąłem z tą samą sytuacją, ale to, co wyskakuje na mnie, jest tym, co trzymacie w tym zakresie. Pojawiło się kanciaste wideo, w którym omawiano zakres. Powinieneś umieścić obiekty modelu w zakresie i nie używać zakresu jako obiektu modelu.

W twoim przykładzie zostaną utworzone dwa zakresy, każdy z ciągiem data. Ponieważ data jest ciągiem i niezmiennym, po zmianie zostanie zastąpiony w edytorze. W twoim przykładzie, jeśli masz dataService zwrócenie obiektu i ten obiekt jest współdzielony między kontrolerami, to może Twoje problemy zostaną rozwiązane. Wypróbujreturn model z {data: data} i połącz się zzamiast data.

To jest niesprawdzone, ale powinno działać w oparciu o znajomość prac kanciastych.