Prawdopodobnie głupie pytanie, ale mam formularz HTML z prostym wejściem i przyciskiem:
<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}
Następnie w kontrolerze (szablon i kontroler są wywoływane z routeProvider):
$scope.check = function () {
console.log($scope.searchText);
}
Dlaczego po kliknięciu przycisku widok jest poprawnie aktualizowany, ale niezdefiniowany w konsoli?
Dzięki!
Aktualizacja: Wydaje się, że faktycznie rozwiązałem ten problem (wcześniej musiałem wymyślić kilka obejść) z: Musiałem tylko zmienić nazwę mojej właściwości z searchText
na search.text
, a następnie zdefiniować pusty $scope.search = {};
obiekt w kontrolerze i voila ... Nie mam pojęcia, dlaczego to działa chociaż ;]
javascript
angularjs
data-binding
angular-ngmodel
alchemikacja
źródło
źródło
searchText
nasearch.text
, jakiś pomysł, dlaczego?voila
, nievuala
,wolla
itpOdpowiedzi:
Kontroler jako wersja (zalecane)
Tutaj szablon
JS
Przykład: http://codepen.io/Damax/pen/rjawoO
Najlepiej będzie użyć komponentu z Angular 2.x lub Angular 1.5 lub wyższym
########Stary sposób (niezalecany)
NIE jest to zalecane, ponieważ ciąg znaków jest prymitywnym, wysoce zalecane jest użycie zamiast niego obiektu
Spróbuj tego w swoim znaczniku
i to w twoim kontrolerze
źródło
searchText
?„Jeśli używasz modelu ng, musisz mieć tam kropkę”.
Wskaż swój model na object.property, a będziesz gotowy.
Kontroler
Szablon
Dzieje się tak, gdy w zasięgu znajdują się zakresy potomne - takie jak trasy potomne lub powtórzenia ng. Zasięg potomny tworzy własną wartość i rodzi się konflikt nazw, jak pokazano tutaj :
Zobacz ten klip wideo, aby uzyskać więcej informacji: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s
źródło
W Mastering Development Application Development with AngularJS, s.19, jest napisane, że
Zakresy są tylko obiektami JavaScript i naśladują hierarchię domen. Zgodnie z JavaScript Prototype Inheritance właściwości zakresów są rozdzielane przez zakresy. Aby tego uniknąć, do łączenia modeli ng należy używać notacji kropkowej .
źródło
Używanie
this
zamiast$scope
prac.Edycja: W momencie pisania tej odpowiedzi miałem znacznie bardziej skomplikowaną sytuację niż ta. Po komentarzach próbowałem go odtworzyć, aby zrozumieć, dlaczego to działa, ale bez powodzenia. Myślę, że jakoś (naprawdę nie wiem dlaczego) generowany jest nowy zakres potomny i
this
odnosi się do tego zakresu. Ale jeśli$scope
zostanie użyty, to tak naprawdę odnosi się do nadrzędnego zakresu $ z powodu javascript funkcję zakresu leksykalnego .Byłoby wspaniale, gdyby ktoś mający ten problem przetestował w ten sposób i poinformował nas.
źródło
$scope
tworzą nowy zakres (tj. W funkcjicheck()
,this
odnosi się do zakresu, który jest zakresem potomnym$scope
). Dlaczego tak jest Czy możesz podać jakieś wyjaśnienia?this.searchText = "something else"
lub nawet$scope.searchText = "something else"
nie, nie zaktualizuje widoku. czy możesz wyjaśnić ten problem?Miałem ten sam problem i było to spowodowane tym, że najpierw nie deklarowałem pustego obiektu na górze mojego kontrolera:
Mam nadzieję, że to zadziała dla Ciebie!
źródło
Ten sam problem natrafiłem na nietradycyjny widok (istnieją zakresy zagnieżdżone). I w końcu odkryłem, że jest to znana trudna rzecz podczas tworzenia aplikacji AngularJS ze względu na charakter prototypowego dziedziczenia skryptu Java. Za pomocą tego mechanizmu tworzone są zagnieżdżone zakresy AngularJS. A wartość utworzona z modelu ng jest umieszczana w zakresie potomnym, nie mówiąc o tym, że zakres macierzysty (być może ten wstrzyknięty do kontrolera) nie zobaczy wartości, wartość spowoduje również cień każdej właściwości o tej samej nazwie zdefiniowanej w zakresie macierzystym, jeśli nie zostanie użyta kropka w celu wymuszenia dostępu do referencyjnego prototypu. Aby uzyskać więcej informacji, zapoznaj się z konkretnym filmem online ilustrującym ten problem, http://egghead.io/video/angularjs-the-dot/ i komentarzami po nim.
źródło
Spójrz na to skrzypce http://jsfiddle.net/ganarajpr/MSjqL/
Mam (zakładam!) Dokładnie to, co robiłeś i wydaje się, że działa. Czy możesz sprawdzić, co tu nie działa?
źródło
Ponieważ nikt o tym nie wspominał, problemu można rozwiązać, dodając
$parent
do powiązanej właściwościI kontroler
źródło
Dla mnie problem został rozwiązany przez gromadzenie moich danych w obiekcie (tutaj „dane”).
Mam nadzieję, że to pomoże
źródło
Właśnie miałem ten problem przy użyciu root_controller powiązanego z elementem body. Następnie korzystałem z widoku ng z routerem kątowym. Problem polega na tym, że kątowe ZAWSZE tworzy nowy zakres, gdy wstawia HTML do elementu ng-view. W konsekwencji moja funkcja „sprawdź” została zdefiniowana w zakresie nadrzędnym zakresu, który został zmodyfikowany przez mój element modelu ng.
Aby rozwiązać problem, wystarczy użyć dedykowanego kontrolera w treści HTML ładowanej z trasy.
źródło
Możesz to zrobić, aby włączyć wyszukiwanie w
ng-keypress
Enter dla tekstu wejściowego ing-click
dla ikony:źródło
Miałem ten sam problem.
Właściwym sposobem byłoby ustawienie „searchText” na właściwość wewnątrz obiektu.
Ale co jeśli chcę zostawić taki, jaki jest, ciąg? cóż, próbowałem każdej wspomnianej tutaj metody, nic nie działało.
Ale potem zauważyłem, że problem dotyczy tylko inicjacji, więc właśnie ustawiłem atrybut wartości i zadziałało.
W ten sposób wartość jest ustawiona na wartość „$ scope.searchText” i jest aktualizowana, gdy zmienia się wartość wejściowa.
Wiem, że to obejście, ale zadziałało dla mnie ..
źródło
Miałem ten sam problem ... Rozwiązaniem, które działało dla mnie, było użycie tego słowa kluczowego ...
alert (this.ModelName);
źródło