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:

$scope i AngularJS

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

Kodförklaring:

  1. Namnet på modulen är "app"
  2. Namnet på kontrollern är "HelloWorldCntrl"
  3. Scope-objekt är huvudobjektet som används för att skicka information från regulatorn till vyn.
  4. 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.

Ställa in eller lägga till Beteende

<!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:

  1. Vi skapar ett beteende som kallas "fullnamn". Detta beteende är en funktion som accepterar 2 parametrar (förnamn, efternamn).
  2. Beteendet returnerar sedan sammankopplingen av dessa 2 parametrar.
  3. 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:

Ställa in eller lägga till Beteende

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