Zmienna prywatna AngularJS w funkcji kontrolera

Jestem nowa w Angularjs. Natknąłem się na przykład w Internecie i naprawdę mnie to zdziwiło. Oto kod:Zmienna prywatna AngularJS w funkcji kontrolera

angular.module("testApp",[]).controller("testCtrl", function($scope){ 

    var data = "Hello"; 

    $scope.getData = function(){ 
     return data; 
    } 

    $scope.setData = function(newData){ 
     data = newData; 
    } 
});

oto widok:

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-click="setData('Hello Hello')">{{getData()}}</div> 
    </body> 
</html>

Moje pytanie brzmi: w jaki sposób kątowy wiedzieć, kiedy należy wywołać metodę getData() w widoku. Zdarzenie click zmieni dane. Jednak jest to zmienna prywatna, niepowiązująca z zakresem $, co oznacza, że zakres $ $ nie obserwuje jej zmiany, a następnie, w jaki sposób kątowa wie kiedy wywołać metodę getData() w widoku? Wiem, że to może głupie pytanie, ale proszę, pomóżcie! Dziękuję bardzo!!

Źródło

2014-08-29 Ryan.Gao

Czy masz szansę na link do skrzypiec? –

Jest on również dołączony do zakresu $ scope. –

Ade Załączono link do Plnkr poniżej :) –

Wyrażenie podwójnie kręcone właśnie nazywa angularjs obserwując dyrektywę. Podczas fazy kompilacji ta dyrektywa rejestruje detektory przy użyciu wyrażenia za pomocą metody zasięgu zakresu.

Z drugiej strony, ng-click jest tym, co AngularJS nazywa dyrektywą odbiornika . Ten typ dyrektywy rejestruje słuchacza z DOM. Po wywołaniu zdarzenia DOM dyrektywa wykonuje skojarzone wyrażenie wewnątrz wywołania $apply.

Oznacza to, że po wykonaniu wyrażenia kliknięcia rozpocznie się cykl $digest. W tym cyklu zakres bada wszystkie zarejestrowane wyrażenia $watch (np. Podwójne wyrażenie zawierające getData()) i wywołuje detektor w przypadku, gdy istnieje różnica od poprzedniej wartości.

W końcu ten cykl trawienia zapewnia, że wszystkie wyrażenia związane są oceniane.

Źródło

2014-08-29 21:30:47

To jeszcze lepsze wyjaśnienie. – Ade

Wiążące {{getData()}} jest "uruchom na ewaluacji". Więc gdy DOM renderuje i tworzy kątowy, widzi () na końcu i uruchamia funkcję. Dostarczę cytatu za minutę, kiedy go znajdę.

Źródło

2014-08-29 21:20:09

Funkcja kontrolera najwyższego poziomu jest uruchamiana bezpośrednio przed renderowaniem widoku w celu zainicjowania zasięgu. Następnie ładuje się widok i wykonywana jest dowolna logika w widoku. Więc kiedy osiągnie getData(), zwraca wynik tej funkcji w tym czasie.

Sprytną częścią jest to, że Angular automatycznie wiąże dane w widokach z powrotem do modelu danych, więc za każdym razem, gdy następuje zmiana modelu (np. Źródło danych), która automatycznie aktualizuje wartość w zobacz i jeśli to konieczne, kilka razy uruchomisz swoją metodę getData().

Uratowałem go here as a Plnkr

Źródło

2014-08-29 21:22:32 Ade

To jest dużo lepsze wytłumaczenie:} –

Dziękuję bardzo! Ja też lubię odpowiedź @Razvana Mocanu, ale decyduję się na łatwe wyjaśnienia :) –

@ Odpowiedź Razvan jest bardziej technicznie dokładnym wyjaśnieniem, chociaż moja jest zasadniczo poprawna pod względem praktycznym. – Ade

Nie trzeba się getData w angularjs ... a może do innych celów niż te, jesteś pokazano tam.

więc prawo kod będzie (bez getData):

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-click="setData('Hello Hello')">{{data}}</div> 
    </body> 
</html>

I GetData:

$scope.getData = function(){ 
     data = 'Hello World'; 
    } 

<html ng-app = "testApp"> 
    <head> 
     <script src="lib/Angular.js"></script> 
     <script src = "foo.js"></script> 
    </head> 
    <body ng-controller="testCtrl"> 
     <div ng-init="getData()" ng-click="setData('Hello Hello')">{{data}}</div> 
    </body> 
</html>

Źródło

2014-08-29 21:27:58 HRK

Nie sądzę, że to odpowiada na pytanie. –

@ Christopher Marshall: Chciałem powiedzieć, że przykład działa, ponieważ wywołuje setData, który jest funkcją $ scope. Ale jeśli wywołasz funkcję wewnętrzną, która nie jest powiązana z $ scope, a ta funkcja zmieni zmienną danych, to nie wyrenderuje. – HRK

Zmienna prywatna AngularJS w funkcji kontrolera

Odpowiedz

Powiązane problemy