什么是 AngularJS 中的 $Scope？带功能的教程（示例）

作者： James Hartman James Hartman
小时 - 权威教程 更新于

AngularJS 中的 $scope 是什么？

AngularJS 中的 $scope 是一个内置对象，它基本上将“控制器”和“视图”绑定在一起。可以在控制器中的作用域中定义成员变量，然后在视图中访问这些变量。

请看下面的示例

$scope in AngularJS

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

代码解释

  1. 模块名为“app”
  2. 控制器名为“HelloWorldCntrl”
  3. Scope 对象是将信息从控制器传递到视图的主要对象。
  4. 添加到 scope 对象的成员变量

设置或添加行为

为了响应事件或在视图中执行某种计算/处理，我们必须为作用域提供行为。

将行为添加到作用域对象以响应视图可能触发的特定事件。一旦在控制器中定义了行为，视图就可以访问它。

让我们看一个如何实现这一目标的例子。

Setting up or adding Behavior

<!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”的行为。此行为是一个函数，接受两个参数（firstName、lastname）。
  2. 然后该行为返回这两个参数的连接。
  3. 在视图中，我们正在调用该行为，并传入“Guru”和“99”这两个值，它们将作为参数传递给该行为。

如果命令执行成功，当您在浏览器中运行代码时，将显示以下输出。

输出

Setting up or adding Behavior

在浏览器中，您将看到“Guru”和“99”这两个值在 控制器 中传递给该行为后的连接结果。

摘要

  • 可以向作用域对象添加各种成员变量，然后在视图中引用它们。
  • 可以添加行为以处理由用户操作触发的事件。
  • AngularJS 的 $rootScope 是整个应用程序的作用域。一个应用程序只能有一个 $rootScope，它用作全局变量。在 Angular JS 中，$scopes 是子作用域，$rootScope 是父作用域。