AngularJS-范围

AngularJS中的“范围”是指模型对象和控制器之间的链接。它是一个JS对象，其作用是在控制器和视图之间传递数据，以及暴露可用于视图中的方法。

创建范围

我们可以在控制器中使用$scope来创建一个范围：

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

在上面的例子中，我们已经创建了一个范围。现在，我们可以在视图中使用它：

<div ng-controller="myCtrl">
  {{ firstName + " " + lastName }}
</div>

在视图中，我们可以直接访问$scope中的属性和方法。

范围继承

当我们创建一个控制器时，AngularJS会自动创建一个范围对象。当控制器被嵌套时，AngularJS还会创建一个子范围对象。子范围从父范围中继承属性和方法，这样我们就可以在父控制器和子控制器之间共享数据。

app.controller('parentCtrl', function($scope) {
  $scope.parentProperty = "I am a parent property";
});

app.controller('childCtrl', function($scope) {
  $scope.childProperty = "I am a child property";
});

<div ng-controller="parentCtrl">
  {{ parentProperty }}
  <div ng-controller="childCtrl">
    {{ parentProperty }}
    {{ childProperty }}
  </div>
</div>

在上面的代码片段中，我们创建了两个控制器。子控制器被嵌套在父控制器中。当子控制器被创建时，AngularJS会自动创建一个新的范围对象。由于该对象继承自父范围，所以它可以访问和修改父范围中的属性和方法。

使用$watch监视范围

AngularJS提供了$watch方法，用于监视范围中的属性更改。当属性值更改时，$watch函数将被调用并被传递新值和旧值。

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";

  $scope.$watch('firstName', function(newValue, oldValue) {
    console.log("new value:", newValue);
    console.log("old value:", oldValue);
  });
});

在上面的代码片段中，我们在范围中创建了两个属性，并使用$watch函数来监视$scope.firstName的更改。当firstName发生更改时，$watch函数将被调用。在这个例子中，我们只是在控制台中打印了新值和旧值，但实际上我们可以执行任何我们想要的操作，例如更新UI。

使用$apply更新范围

有时候我们需要在回调函数中更新范围属性的值，但由于回调函数是异步的，AngularJS范围可能没有机会自动更新视图，这时就需要我们手动更新范围。

app.controller('myCtrl', function($scope) {
  $scope.count = 0;

  setInterval(function() {
    //这是一个异步函数
    $scope.count++;
    //范围已更改，但UI尚未更新
  }, 1000);

  setInterval(function() {
    //这个回调函数将更新UI并告诉AngularJS范围已更改。
    $scope.$apply();
  }, 1000);
});

在上面的代码片段中，我们创建了两个定时器函数。第一个定时器每秒钟增加$scope.count的值。由于它是异步的，范围已经更改，但UI尚未更新。我们必须使用第二个定时器来手动更新范围和UI。这是通过$scope.$apply()函数实现的。

结论

通过使用AngularJS范围，我们可以方便地在控制器和视图之间共享数据。我们还可以使用$watch和$apply函数来监视范围的更改和手动更新UI。技术人员需要在使用前仔细了解每种功能的实际用途和工作原理，以便最大限度地利用它们来构建更好的Web应用程序。