Co to jest $Scope w AngularJS? Samouczek z funkcją (przykłady)

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

Co to jest zakres $ w AngularJS?

$zakres w AngularJS jest wbudowanym obiektem, który zasadniczo łączy „kontroler” i „widok”. Można zdefiniować zmienne członkowskie w zakresie w kontrolerze, do których następnie będzie można uzyskać dostęp z widoku.

Rozważ przykład poniżej:

$zakres w AngularJS

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

Wyjaśnienie kodu:

  1. Nazwa modułu to „aplikacja”
  2. Nazwa kontrolera to „HelloWorldCntrl”
  3. Obiekt Scope jest głównym obiektem służącym do przekazywania informacji ze sterownika do widoku.
  4. Zmienna członkowska dodana do obiektu zakresu

Konfigurowanie lub dodawanie zachowania

Aby reagować na zdarzenia lub wykonywać jakieś obliczenia/przetwarzanie w widoku, musimy zapewnić zachowanie zakresu.

Zachowania są dodawane do obiektów zakresu, aby reagować na określone zdarzenia, które mogą zostać wyzwolone przez Widok. Po zdefiniowaniu zachowania w kontrolerze można uzyskać do niego dostęp z poziomu widoku.

Spójrzmy na przykład, jak możemy to osiągnąć.

Konfigurowanie lub dodawanie zachowania

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

Wyjaśnienie kodu:

  1. Tworzymy zachowanie o nazwie „fullName”. To zachowanie jest funkcją, która akceptuje 2 parametry (imię, nazwisko).
  2. Następnie zachowanie zwraca połączenie tych dwóch parametrów.
  3. W tym widoku wywołujemy zachowanie i przekazujemy 2 wartości „Guru” i „99”, które są przekazywane jako parametry zachowania.

Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Konfigurowanie lub dodawanie zachowania

W przeglądarce zobaczysz połączenie obu wartości Guru i 99, które zostały przekazane do zachowania w kontroler.

Podsumowanie

  • Do obiektu zakresu można dodać różne zmienne składowe, do których można następnie odwoływać się w widoku.
  • Zachowanie można dodać do pracy ze zdarzeniami, które generowane są dla działań wykonywanych przez użytkownika.
  • angularjs $rootScope to zakres całej aplikacji. Aplikacja może mieć tylko jeden $rootScope i jest używana jak zmienna globalna. W Angular JS $scopes są zakresami podrzędnymi, a $rootScope jest zakresem nadrzędnym

Podsumuj ten post następująco: