Mi az a $Scope az AngularJS-ben? Oktatóanyag funkcióval (példák)

By: James Hartman James Hartman
Hours korszerűsített

Mi a $scope az AngularJS-ben?

$scope az AngularJS-ben egy beépített objektum, amely alapvetően a „vezérlőt” és a „nézetet” köti össze. A vezérlőn belüli hatókörben tagváltozók definiálhatók, amelyek azután a nézet által elérhetők.

Vegye figyelembe az alábbi példát:

$scope az AngularJS-ben

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

Kód magyarázata:

  1. A modul neve „app”
  2. A vezérlő neve „HelloWorldCntrl”
  3. A Scope objektum az a fő objektum, amely az információnak a vezérlőtől a nézethez történő továbbítására szolgál.
  4. Tagváltozó hozzáadva a hatókör objektumhoz

Viselkedés beállítása vagy hozzáadása

Ahhoz, hogy reagáljunk az eseményekre, vagy valamilyen számítást/feldolgozást hajtsunk végre a Nézetben, viselkedést kell biztosítanunk a hatókör számára.

A viselkedések hozzáadódnak a hatókör objektumokhoz, hogy reagáljanak a nézet által esetlegesen kiváltott konkrét eseményekre. Miután a viselkedést meghatározták a vezérlőben, a nézet hozzáférhet.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

Viselkedés beállítása vagy hozzáadása

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

Kód magyarázata:

  1. A „fullName” nevű viselkedést hozzuk létre. Ez a viselkedés olyan függvény, amely 2 paramétert (firstName, lastname) fogad el.
  2. A viselkedés ezután ennek a 2 paraméternek az összefűzését adja vissza.
  3. Ebben a nézetben a viselkedést nevezzük, és 2 értéket adunk át: „Guru” és „99”, amelyek paraméterként adódnak át a viselkedésnek.

Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Viselkedés beállítása vagy hozzáadása

A böngészőben látni fogja a Guru és a 99 értékeinek összefűzését, amelyeket átadtak a ellenőr.

Összegzésként

  • Különféle tagváltozók adhatók hozzá a hatókör objektumhoz, amelyekre ezután hivatkozni lehet a nézetben.
  • A viselkedés hozzáadható a felhasználó által végrehajtott műveletekhez generált eseményekhez.
  • A AngularJS $rootScope az egész alkalmazás területe. Egy alkalmazásnak csak egy $rootScope lehet, és globális változóként használják. Az Angular JS-ben a $scopes gyermekhatókör, a $rootScope pedig a szülő hatókör