AngularJS の $Scope とは何ですか? 関数付きチュートリアル（例）

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

AngularJS の $scope とは何ですか?

AngularJS の $scope 基本的に「コントローラー」と「ビュー」をバインドする組み込みオブジェクトです。 コントローラー内のスコープでメンバー変数を定義すると、ビューからアクセスできます。

以下の例を考えてみましょう。

AngularJS の $scope

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

コードの説明：

  1. モジュールの名前は「アプリ」です
  2. コントローラーの名前は「HelloWorldCntrl」です。
  3. Scope オブジェクトは、コントローラーからビューに情報を渡すために使用される主要なオブジェクトです。
  4. メンバー変数がスコープオブジェクトに追加されました

動作の設定または追加

イベントに反応したり、ビュー内で何らかの計算/処理を実行したりするには、スコープに動作を提供する必要があります。

ビヘイビアーは、ビューによってトリガーされる可能性のある特定のイベントに応答するためにスコープ オブジェクトに追加されます。 コントローラーで動作を定義すると、ビューからアクセスできるようになります。

これを実現する方法の例を見てみましょう。

動作の設定または追加

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

コードの説明：

  1. 「fullName」という動作を作成しています。 この動作は、2 つのパラメーター (firstName、lastname) を受け入れる関数です。
  2. その後、動作はこれら 2 つのパラメーターを連結したものを返します。
  3. ビューでは動作を呼び出し、パラメータとして動作に渡される「Guru」と「2」の 99 つの値を渡します。

コマンドが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

動作の設定または追加

ブラウザには、動作に渡された Guru と 99 の両方の値が連結されたものが表示されます。 コントローラ.

概要

  • さまざまなメンバー変数をスコープ オブジェクトに追加し、ビュー内で参照できるようにします。
  • ユーザーが実行したアクションに対して生成されるイベントを操作する動作を追加できます。
  • XNUMXμmの波長を持つ AngularJS $rootScope アプリケーション全体のスコープです。 アプリケーションは $rootScope を XNUMX つだけ持つことができ、グローバル変数のように使用されます。 Angular JS では、$scopes は子スコープであり、$rootScope は親スコープです。