Vad är $Scope i AngularJS? Handledning med funktion (exempel)
Vad är $scope i AngularJS?
$scope i AngularJS är ett inbyggt objekt som i princip binder ihop "kontrollern" och "vyn". Man kan definiera medlemsvariabler i scopet inom regulatorn som sedan kan nås av vyn.
Tänk på exemplet nedan:
angular.module('app',[]).controller('HelloWorldCtrl' function($scope) { $scope.message = "Hello World" });
Kodförklaring:
- Namnet på modulen är "app"
- Namnet på kontrollern är "HelloWorldCntrl"
- Scope-objekt är huvudobjektet som används för att skicka information från regulatorn till vyn.
- Medlemsvariabel tillagd till scope-objekt
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 väl har definierats i kontrollern kan det nås av vyn.
Låt oss titta på ett exempel på hur vi kan uppnå detta.
<!DOCTYPE html> <html lang="en"> <head> <meta chrset="UTF 8"> <title>Guru99</title> </head> <body ng-app="DemoApp"> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-controller="DemoController"> {{fullName("Guru","99")}} </div> <script type="text/javascript"> var app = angular.module("DemoApp", []); app.controller("DemoController", function($scope) { $scope.fullName=function(firstName,lastname){ return firstName + lastname; } } ); </script> </body> </html>
Kodförklaring:
- Vi skapar ett beteende som kallas "fullnamn". Detta beteende är en funktion som accepterar 2 parametrar (förnamn, efternamn).
- Beteendet returnerar sedan sammankopplingen av dessa 2 parametrar.
- I vyn kallar vi beteendet och skickar in 2 värden av "Guru" och "99" som skickas som parametrar till beteendet.
Om kommandot exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
I webbläsaren kommer du att se en sammanlänkning av både värdena för Guru och 99 som skickades till beteendet i styrenhet.
Sammanfattning
- Olika medlemsvariabler kan läggas till scope-objektet som sedan kan refereras till i vyn.
- Beteende kan läggas till för att arbeta med händelser som genereras för åtgärder som utförs av användaren.
- Ocuco-landskapet 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 $scopes underordnade omfattningar och $rootScope är överordnat omfång