Mi az a $Scope az AngularJS-ben? Oktatóanyag funkcióval (példák)
James Hartman
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:
angular.module('app',[]).controller('HelloWorldCtrl'
function($scope)
{
$scope.message = "Hello World"
});
Kód magyarázata:
- A modul neve „app”
- A vezérlő neve „HelloWorldCntrl”
- 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.
- 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.
<!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:
- A „fullName” nevű viselkedést hozzuk létre. Ez a viselkedés olyan függvény, amely 2 paramétert (firstName, lastname) fogad el.
- A viselkedés ezután ennek a 2 paraméternek az összefűzését adja vissza.
- 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:
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
$rootScopeaz 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
