angularjs - przełącznik ng nie wiąże się z modelem ng

Question

Mam ten repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq, który wyświetla się po kliknięciu "Tytuł 3" i wprowadzeniu wartości w polu tekstowym, chociaż wprowadzona wartość pokazuje odzwierciedlenie w interfejsie użytkownika po kliknięciu przycisku "Kliknij". "przycisk nic nie jest wiązany dla atrybutu zasięgu $ scope.test.

Nie wiem, co jest nie tak z przełącznikiem Ng lub może robię coś nie tak. Pomoc jest doceniana !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

Jest to problem zakres spadków powodu ng-switch tworzenia własnych zakres.

Często stosowaną rekomendacją jest zawsze stosowanie modelu dot. Powodem jest to, że gdy element zakresu kontrolera jest obiektem, a nie prymitywnym, podzakresy stworzą odniesienie do obiektu początkowego. Jeśli model jest prymitywny, nie zaktualizuje oryginału.

Na przykład:

<input ng-model="test.value" placeholder="pre" type="text" /> 

$scope.test={value:''} 

Innym podejściem jest użycie $parent w html modelu znaczników:

<input ng-model="$parent.test" placeholder="pre" type="text" /> 

Stosując metodologię dot jest dobra praktyka, aby uniknąć tych problemów, jak don nie musisz myśleć o głębszych zagnieżdżonych zakresach.

Demo używając test.value jako modelu http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

odniesienia dotyczące dot w modelach (cenny czytanie): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

To dlatego, że jesteś rzeczywiście tworzenie zakresu dziecko wnętrza NG-switch. Tak więc inna właściwość test istnieje w zakresie należącym do dyrektywy ngSwitch. Początkowo pokaże wartość z zakresu nadrzędnego, ale gdy ją edytujesz, ponieważ jest prymitywna, edytuje ona tylko wartość podrzędną, a nie nadrzędną. Prototypowe dziedziczenie nie wchodzi tutaj w grę (ale tego właśnie potrzebujemy).

Po kliknięciu przycisku przycisk ostrzega/konsola.logowanie właściwości w zakresie nadrzędnym ..., których dziecko nie może zmienić.

Aby rozwiązać ten korzystanie $parent.test na atrybucie ng-modelu w swojej ngSwitch:

urywek:

<span class="pew" ng-switch-when="title2"> 
    <input ng-model="$parent.test" placeholder="pre" type="text" /> 
    {{test}} 
</span> 

And here's a fork of your plunker showing it in action.

Answer 3

Napotkałem podobny problem, a ja już rozwiązany poprzez utworzenie zmiennej zakres w kontrolerze i używał tego z ng-include i ng-switch. W ten sposób, jeśli masz głęboko zagnieżdżone ng-include z ng-switch i dalej, możemy nadal bezpośrednio użyć tej zmiennej zasięgu.

Jako wszystkich zakresów dziecka (tutaj, ng-include/ng-switch) rozciąga się od zakresu nadrzędnego (generalnie, zakres kontrolerów), my mogą uzyskać dostęp do zakresu od rodzica bezpośrednio z tych zakresów dzieci bez problemu.

Korzystanie $parent wymagać będzie pisać jak $parent.$parent.$parent.someProp

przykładu upadać:http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview