AngularJS 是一款流行的前端框架，它的核心概念之一是 $scope。$scope 是一个对象，它将模型绑定到视图中。在 AngularJS 中，我们可以通过掌控和跟踪 $scope 中的模型来实现数据的双向绑定和动态更新。
$scope 的基本用法
在 AngularJS 中，我们可以使用 $scope 对象来创建模型。$scope 对象可以在控制器中创建，也可以在指令中创建。下面是一个基本的控制器示例：
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.name = 'John';
$scope.age = 30;
});在这个控制器中，我们创建了一个 $scope 对象，并在其上定义了两个属性：name 和 age。这两个属性可以在视图中使用，例如：
<div ng-app="myApp" ng-controller="myController">
<p>My name is {{name}}, and I am {{age}} years old.</p>
</div>这个视图将会显示：My name is John, and I am 30 years old.。当我们改变 $scope 中的属性值时，视图也会自动更新。
$scope 的作用域
在 AngularJS 中，$scope 对象有自己的作用域。在控制器中创建的 $scope 对象只能在该控制器及其子控制器中使用。这意味着，如果我们在一个控制器中创建了一个 $scope 对象，那么该 $scope 对象的属性只能在该控制器及其子控制器中使用。
例如，我们可以创建一个父控制器和一个子控制器：
angular.module('myApp', [])
.controller('parentController', function($scope) {
$scope.name = 'John';
})
.controller('childController', function($scope) {
$scope.age = 30;
});在这个例子中，我们在父控制器中创建了一个 $scope 对象，并在其上定义了一个属性 name。在子控制器中，我们创建了另一个 $scope 对象，并在其上定义了一个属性 age。
在视图中，我们可以这样使用这两个控制器：
<div ng-app="myApp" ng-controller="parentController">
<p>My name is {{name}}.</p>
<div ng-controller="childController">
<p>My age is {{age}}.</p>
</div>
</div>这个视图将会显示：My name is John. My age is 30.。
$scope 的继承
在 AngularJS 中，$scope 对象的作用域是继承的。这意味着，一个子控制器可以访问其父控制器的 $scope 对象中的属性。
例如，我们可以创建一个父控制器和一个子控制器，并在父控制器的 $scope 对象中定义一个属性：
angular.module('myApp', [])
.controller('parentController', function($scope) {
$scope.name = 'John';
})
.controller('childController', function($scope) {
$scope.age = 30;
});在视图中，我们可以这样使用这两个控制器：
<div ng-app="myApp" ng-controller="parentController">
<p>My name is {{name}}.</p>
<div ng-controller="childController">
<p>My name is {{name}}, and my age is {{age}}.</p>
</div>
</div>这个视图将会显示：My name is John. My name is John, and my age is 30.。在子控制器中，我们可以访问父控制器的 $scope 对象中的属性 name。
$scope 的 $watch 方法
在 AngularJS 中，我们可以使用 $watch 方法来监视 $scope 中的模型，并在模型发生变化时执行一些操作。$watch 方法接受两个参数：要监视的模型和回调函数。
例如，我们可以创建一个控制器，并在其 $scope 对象中定义一个属性：
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.name = 'John';
$scope.$watch('name', function(newValue, oldValue) {
console.log('Name changed from ' + oldValue + ' to ' + newValue);
});
});在这个控制器中，我们使用 $watch 方法来监视 $scope 对象中的属性 name。每当属性值发生变化时，回调函数就会被调用，并输出一条日志。
在视图中，我们可以这样使用这个控制器：
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="name">
<p>My name is {{name}}.</p>
</div>这个视图将会显示一个文本框和一个显示当前 name 属性值的段落。当我们在文本框中输入新的值时，控制台将输出一条日志，显示属性值从旧值变为新值的过程。
结论
在 AngularJS 中，$scope 对象是非常重要的。通过掌控和跟踪 $scope 中的模型，我们可以实现数据的双向绑定和动态更新。在本文中，我们介绍了 $scope 的基本用法、作用域、继承以及 $watch 方法。希望本文对你理解和使用 AngularJS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67549b741b963fe9cc4f91dd