AngularJS Scope(作用域)学习笔记

在AngularJS中，Scope(作用域)是连接控制器和视图的桥梁。作用域负责监视模型变化并向视图广播变化，也会监听用户事件并通知控制器。在AngularJS中，每个控制器都有自己的作用域。

创建作用域

在AngularJS中，可以使用ng-controller指令来为HTML元素创建控制器，并通过控制器创建作用域：

htmlCopy Code
<div ng-controller="MyController">
  <!-- 模板代码 -->
</div>

控制器可以在JavaScript中定义：

javascriptCopy Code
angular.module('myApp', []).controller('MyController', function($scope) {
  // 控制器代码
});

在这个例子中，我们定义了一个名为myApp的AngularJS应用程序，并在该应用程序中创建了一个名为MyController的控制器。控制器的参数是$scope对象，这个对象被用来设置和读取视图中的数据。

作用域继承

在AngularJS中，作用域是按照层次结构组织的。每个控制器都有自己的作用域，而这些作用域可以继承自父级作用域。例如，下面的代码演示了一个控制器从父级作用域中继承属性：

htmlCopy Code
<div ng-controller="ParentController">
  <div ng-controller="ChildController">
    <!-- 模板代码 -->
  </div>
</div>

javascriptCopy Code
angular.module('myApp', []).controller('ParentController', function($scope) {
  $scope.parentProp = 'Parent Property';
}).controller('ChildController', function($scope) {
  // 子控制器继承了父级作用域的parentProp属性
  console.log($scope.parentProp); // 输出: Parent Property
});

作用域监听

作用域可以通过$watch方法来监听模型的变化。$watch方法接受两个参数：要监听的模型的名称和一个回调函数，在模型变化时被调用。例如：

javascriptCopy Code
angular.module('myApp', []).controller('MyController', function($scope) {
  $scope.myModel = 'Initial Value';  // 初始化myModel属性
  $scope.$watch('myModel', function(newValue, oldValue) {
    // 在模型变化时输出newValue和oldValue
    console.log('New Value: ' + newValue);
    console.log('Old Value: ' + oldValue);
  });
});

在这个例子中，$watch方法监听myModel属性的变化，并在变化时输出新值和旧值。

实例

下面是一个关于作用域的实例。在这个实例中，我们创建了一个名为myApp的AngularJS应用程序，并定义了一个名为MyController的控制器。该控制器创建了一个名为greeting的属性，将其设置为“Hello, World!”。然后，我们使用ng-model指令绑定到一个输入字段，让用户可以编辑这个属性。我们还使用{{$parent.greeting}}来在父级作用域中读取greeting属性。

htmlCopy Code
<div ng-app="myApp" ng-controller="MyController">
  <input type="text" ng-model="greeting">
  <p>Child scope: {{greeting}}</p>
  <p>Parent scope: {{$parent.greeting}}</p>
</div>

javascriptCopy Code
angular.module('myApp', []).controller('MyController', function($scope) {
  $scope.greeting = 'Hello, World!';
});

当用户输入新的内容时，子作用域中的greeting属性会被更新，并显示在“Child scope”段落中。同时，父级作用域中的greeting属性也会被更新，并显示在“Parent scope”段落中。

结论

作用域是AngularJS中非常重要的一个概念，它连接了控制器和视图，并充当了监视器，以便处理模型变化和响应用户事件。在使用AngularJS时，深入理解作用域的特性和行为非常重要。