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"
	});

Code Fö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>

Code Fö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 anropar vi beteendet och skickar in två värden för "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 ser du en sammanfogning av båda värdena för Guru & 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

Sammanfatta detta inlägg med: