AngularJS 的作用域是什么？

在本文中，我们将了解 Angular JS 中的作用域是什么以及如何使用作用域。 Angular JS 中的 Scope 是 HTML（视图）和 JavaScript（控制器）之间的绑定部分，它是一个内置对象。它包含应用程序数据和对象。它可用于视图和控制器。它是一个具有可用属性和方法的对象。 Angular JS 中有两种类型的作用域。

• $范围
• $rootScope

如何使用范围？

当我们在 AngularJS 中创建控制器时，我们会将 $scope 对象作为参数传递。在 AngularJS 中，它会创建一个不同的 $scope 对象并将其注入应用程序中的每个控制器。因此，附加到一个控制器内的 $scope 的数据和方法不能在另一个控制器上访问。在嵌套控制器中，子控制器将获取父控制器的作用域对象。因此，子控制器可以访问添加到父控制器的属性，但父控制器不能访问附加到子控制器的属性。

理解范围：如果我们看到一个 AngularJS 应用程序，它包括：

• HTML 视图。
• 模型，可用于当前视图的数据。
• 控制器，制作/更改/删除/控制数据的 JavaScript函数。

范围是模型，它是一个 JavaScript 对象，具有可用于视图和控制器的属性和方法。

示例 1：在此示例中，我们将看到 $scope 对象的使用，还将看到数据如何从控制器传输到使用插值渲染的视图组件。

HTML

  

    
    

  

    
        {{organisation}}
    
  
    
        The property "organisation" was made in 
        the controller, and can be referred to 
        in the view by using the {{ }} brackets.
    
  
    
        var geeks = angular.module("gfg", []);
        geeks.controller("myCtrl", function($scope) {
            $scope.organisation = "GeeksforGeeks";
        });
    

  

输出：

控制器生成的属性可以在视图中引用。

示例 2：在示例 1 中，我们只使用了单个范围，但对于较大的应用程序，它可能是 HTML DOM 中可以访问某些范围的部分。

HTML

  

    AngularJS | Scope
    
    

  

    
        
            {{x}}
        
    
      
    
        var geeks = angular.module("gfg", []);
        geeks.controller("control", function($scope) {
            $scope.names = [
                "DSA Learning",
                "Algorithm Learning",
                "Web Technology",
            ];
        });
    

  

输出：

在上面的例子中，在下面的例子中只有一个作用域，你会看到不止一个作用域。

根范围：根范围是在具有 ng-app 指令的 HTML 元素上创建的范围，并且包含在所有应用程序中。根范围的可用性在整个应用程序中。

示例 3：如果在当前作用域和根作用域中声明了具有相同名称的任何变量，则应用程序将使用当前作用域。在这个例子中，我们将看到当前作用域如何使用名为“color”的变量。

HTML

  

    
    

  

    The rootScope's favorite color:
    {{color}}
  
    
        The scope of the controller's favorite color:
        {{color}}
    
  
    The rootScope's favorite color is still:
    {{color}}
  
    
        Note that the color variable in controller 
        does not overwrite the color value in 
        rootScope.
    
  
    
        var app = angular.module("myApp", []);
        app.run(function($rootScope) {
            $rootScope.color = "turquoise";
        });
        app.controller("myCtrl", function($scope) {
            $scope.color = "salmon";
        });
    

  

输出：

在控制器的作用域和根作用域中都存在一个名为“color”的变量。