Vad är $ Scope i AngularJS? Handledning med exempel

Innehållsförteckning:

Anonim

Vad är $ scope i AngularJS?

$ scope i AngularJS är ett inbyggt objekt som i grunden binder "controller" och "view". Man kan definiera medlemsvariabler i omfånget inom styrenheten som sedan kan nås av vyn.

Tänk på exemplet nedan:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Kodförklaring:

  1. Modulens namn är "app"
  2. Styrenhetens namn är "HelloWorldCntrl"
  3. Scope-objekt är huvudobjektet som används för att överföra information från styrenheten till vyn.
  4. Medlemsvariabel har lagts till omfångsobjektet

Ställa in eller lägga till beteende

För att kunna reagera på händelser eller utföra någon form av beräkning / bearbetning i vyn, måste vi tillhandahålla beteende till omfattningen.

Beteenden läggs till i omfångsobjekt för att svara på specifika händelser som kan utlösas av vyn. När beteendet har definierats i styrenheten kan det nås via vyn.

Låt oss titta på ett exempel på hur vi kan uppnå detta.

Guru99

Guru99 Global Event

{{fullName("Guru","99")}}

Kodförklaring:

  1. Vi skapar ett beteende som heter "fullName". Detta beteende är en funktion som accepterar två parametrar (förnamn, efternamn).
  2. Beteendet returnerar sedan sammanfogningen av dessa två parametrar.
  3. I vyn kallar vi beteendet och skickar in två värden "Guru" och "99" som skickas som parametrar för beteendet.

Om kommandot utförs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.

Produktion:

I webbläsaren ser du en sammanfogning av båda värdena för Guru & 99 som skickades till beteendet i styrenheten.

Sammanfattning

  • Olika medlemsvariabler kan läggas till omfångsobjektet som sedan kan refereras i vyn.
  • Beteende kan läggas till för att arbeta med händelser som genereras för handlingar som utförs av användaren.
  • Angularjs $rootScopeär omfattningen för hela applikationen. En applikation kan bara ha en $ rootScope och används som en global variabel. I Angular JS $ är omfattningar barnomfång och $ rootScope är överordnat omfång