Angularjs: 2-drożne wiązanie nie działa w dołączonym szablonie

Question

Myślę, że brakuje mi czegoś prostego (i ważnego) tutaj. Używam dołączonego szablonu, który zawiera wejście, które jest mapowane do pewnej wartości:

<div ng-controller="Ctrl"> 
    <div ng-include src="'template.html'"></div> 
</div> 

<!-- template --> 
<script type="text/ng-template" id="template.html"> 
    <input ng-model="testvalue" /> 
</script> 

Kontroler:

function Ctrl($scope) {  
    $scope.testvalue= "initial value"; 
}​ 

alarmując wartość $ scope.testvalue zawsze pokazuje wartość początkową, a nie zaktualizowany wartość (podczas wpisywania danych wejściowych). Pomóż mi Obi-Wanowi. Jesteś naszą jedyną nadzieją.

Fiddle: http://jsfiddle.net/h5aac/

Answer 1

To jest zbyt powszechny wiązania się prymitywne zamiast obiektu. Wartość łańcucha zostaje przekazana, a nie odniesienie do obiektu. Jeśli użyjesz obiektu zamiast pierwotnego, działa dobrze. Coś takiego w twoim zasięgu.

$scope.foo = {testvalue: "initial value"}; 

Zobacz http://jsfiddle.net/h5aac/2/

również:

Using `ng-model` within a transcluded directive in AngularJS

binding issue when a directive in a ngRepeat

AngularJS - updating scope value with asynchronous response

jestem pewien, że są bardziej ...

Answer 2

Alternatywą przedstawieniu właściwości obiektu w zakresie dominującej jest użycie $ rodzica, aby uzyskać dostęp prymitywne w zakresie dominującej:

<input ng-model="$parent.testvalue" /> 

ng obejmują tworzy zakres dzieci. Ten zakres prototypowo dziedziczy po obszarze nadrzędnym Ctrl. Oto jak działają 3 warianty:

• $ parent.testvalue Opaski model do nieruchomości w zakresie dominującej
• testValue sama łączy model do nowego obiektu, który zostanie utworzony w sprawie zakresu dziecięcej. Ta właściwość "cienie/ukrywa" nadrzędną właściwość zakresu o tej samej nazwie.
• foo.testvalue (np. Patrz odpowiedź @ dnc253) również wiąże model z właściwością nadrzędną. Działa to w ten sposób: Javascript nie widzi/nie znajduje "foo" w zakresie podrzędnym, więc szuka go w zakresie nadrzędnym (z powodu prototypowego dziedziczenia) i znajduje go.

Aby zobaczyć, co zakres dziecko wygląda, użyj oryginalnego skrzypce i dodać ten kod do szablonu gdzieś:

<a ng-click="showScope($event)">show scope</a> 

I dodać ten kod do swojej Ctrl:

$scope.showScope = function(e) { 
    console.log(angular.element(e.srcElement).scope()); 
} 

Przed wpisaniem w polu tekstowym kliknij link "pokaż zakres". W konsoli (używam Chrome) możesz rozszerzyć zakres "Dziecko" i zobaczyć, że nie zawiera jeszcze właściwości testwalu (co jest dla mnie zaskakujące, ponieważ nie wiem, w jaki sposób wyświetla ona "wartość początkową" w polu tekstowym).Możesz rozwinąć element $ parent, a zobaczysz tam właściwość testvalue - właściwość o tej nazwie pojawia się w tym momencie tylko w zakresie nadrzędnym.

Teraz wyczyść konsolę, wpisz w polu tekstowym i kliknij ponownie link "pokaż zakres". Zobaczysz, że zakres "Dziecko" ma teraz nową właściwość testvalue. Cieniuje/ukrywa własność nadrzędną. Tak więc rzeczy w zakresie podrzędnym zobacz właściwość testval scope zakresu, a rzeczy w zakresie nadrzędnym zobacz właściwość testvalue zakres nadrzędny.

Aktualizacja: FYI, niedawno napisał obszerny artykuł na temat odbierania/zakres prototypowego dziedziczenia, który wyjaśnia powyższe koncepcje w znacznie bardziej szczegółowo, z dużą ilością zdjęć: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?