AngularJS |范围

AngularJS中的范围是HTML视图和JavaScript控制器的绑定部分。当您将属性添加到JavaScript控制器中的作用域对象中时，只有HTML视图才能访问这些属性。 AngulerJS中有两种类型的范围。

• $作用域
• $ rootScope

范围：以下列出了几个特定的功能：

• HTML视图
• 当前视图(称为模型)可用的数据
• 制作/更改/删除/控制数据的JavaScript函数称为Controller。

句法：

$scope

示例1：此示例将更清楚地说明范围概念，此示例包含单个范围。

  

    
      AngularJS | Scope
    
    
    

  

  
    
  
        {{organization}}
        A Computer Science Portal
    
  
    
        var geeks = angular.module('gfg', []);
        geeks.controller('control', function($scope) {
            $scope.organization = "GeeksforGeeks";
        });
    
  

  

输出：

示例2：在上面的示例中，下面的示例中只有一个范围，您将看到多个范围。

  

    
        AngularJS | Scope
    
    
    

  

  
    
  
        
            {{x}}
        
  
    
  
    
        var geeks = angular.module('gfg', []);
  
        geeks.controller('control', function($scope) {
            $scope.names = ["Python", "Machine Learning",
                               "Artificial Inteligence"];
        });
    
  

  
                    

输出：

rootScope：如果您的变量在rootscope和当前作用域中都包含相同的名称，则控制器或应用程序将使用当前作用域。
句法：

$rootScope

示例3：此示例将向您展示如果变量名称在控制器的作用域和rootscope中相同，将会发生什么。

  

    
        AngularJS | Scope
    
    
    

  

    GeeksforGeeks
    Jack and Jones
    {{relation}}
  
    
  
        Akbar and Antony 
        {{relation}}
  
    
  
    Jay and Viru
    {{relation}}
  
    
        var geeks = angular.module('gfg', []);
        geeks.run(function($rootScope) {
            $rootScope.relation = 'friend';
        });
        geeks.controller('control', function($scope) {
            $scope.relation = "brothers";
        });
    
  

  

输出：