什么是 $scope 和 $rootScope ？

$scope是一个引用应用程序数据的 JavaScript 对象。它附加了可用于视图和控制器的属性和方法。所以，我们可以说 $scope 是HTML 视图和 JavaScript 控制器之间的绑定部分。 $scope 包含需要在视图中显示的所有模型数据。

AngularJS 是一个基于MVC的框架。 MVC 代表模型视图控制器。 MVC 用于将应用程序逻辑与用户界面层隔离开来。 Model 负责维护应用程序数据，向用户显示数据的视图和控制器是软件代码，负责模型和视图之间的交互。范围是模型。

方法：

• 在制作控制器时，将 $scope 对象作为参数传递。

  app.controller("myCrtl",function($scope){});

• 将属性添加到控制器内的 $scope 对象。

  app.controller("myCrtl",function($scope){
  $scope.name="GeeksforGeeks";
  });

  使用绑定表达式复制要显示的属性值。

   Name: {{name}}

示例 1：了解作用域的工作原理

HTML

  

    
    

  

    {{title}}
    Enter a number:
    
    
    Enter a number:
    
    
    
        Add
    
    Answer: {{answer}}
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.a = 0;
            $scope.b = 0;
            $scope.answer = 0;
            $scope.title = "GeeksforGeeks";
            $scope.add = function () {
                $scope.answer = $scope.a + $scope.b;
            };
        });
    

  

输出：

示例 1

说明：在本例中，在控制器“myCtrl”的范围内添加了各种属性。当您将属性添加到范围时，视图可以访问这些属性。使用 {{}} 在视图中访问在范围内创建的“title”属性。同样，当您从视图更改属性的值时，它也会反映在范围中。变量“a”、“b”和“answer”的值最初为 0。当用户输入这两个数字并单击“添加”按钮时，“a”、“b”和“answer”的值变化并再次反映在视图中。

示例 2：使用字符串、对象、函数处理范围

在本例中，在脚本中，我们创建了一个名为“myApp”的模块。我们在名为“myCtrl”的模块中添加了一个控制器。在控制器中，我们向 $scope 添加了字符串、函数、对象等属性。属性的值显示在视图中。

HTML

  

    
    

  

    {{title}}
    
        Enter first name: 
        
        
        Enter last name: 
        
    
    Name: {{name()}}
  
    Courses:
  
    
        {{x}}
    
    Tutorials:
  
    
        {{y}}
    
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.title = "GeeksforGeeks";
            $scope.firstname = "";
            $scope.lastname = "";
            $scope.name = function () {
                return $scope.firstname +
                  " " +
                  $scope.lastname;
            };
            $scope.subjects = {
                courses: ["Live Courses",
                    "Self-Paced Courses",
                    "School Courses"],
                tutorials: ["Practice DS and Algo.",
                    "Algorithms",
                    "Data Structure",
                    "Software Designs",
                    "CS Subjects"],
            };
        })
    

  

输出：

示例 2

AngularJS 中的范围本质上是分层的： $rootScope充当全局变量。 AngularJS 应用程序的所有 $scope 都是 $rootscope 的子级。一个应用程序只能有一个 $rootScope 。它是在包含ng-app指令的 HTML 元素上创建的范围，可在整个应用程序中使用。

示例 3：了解 $scope 和 $rootScope 的工作原理。

在此示例中，在加载应用程序时，会创建一个名为 message1 的属性，该属性属于 rootScope。我们还创建了一个名为“myCtrl”的控制器，并向范围添加了一个属性 message2。

HTML

  

    
    

  

    Message: {{message1}}
  
    
        Message: {{message1}}
        Message: {{message2}}
        Message: {{message4}}
    
    
        var app = angular.module("myApp", []);
        app.run(function ($rootScope) {
            $rootScope.message1 =
                "This is rootScope message 1.";
            $rootScope.message2 =
                "This is rootScope message 2."
        });
        app.controller("myCtrl", function ($scope) {
            $scope.message2 = "This is scope message 2.";
            $scope.message4 = "This is scope message 4."
        });
    

  

输出：

示例 3

说明：您可以在上面的示例中观察到，属于 rootScope 的属性对所有控制器都是可用的。因此，我们可以在

元素中打印属于 rootScope 的“message1”，其中控制器“myCtrl”被指定为 rootScope 在整个应用程序中可用。

而在 rootScope 和范围中都指定了“message2”。当变量名在作用域和 rootScope 中相同时，应用程序使用当前作用域中的变量名。由于在

标签中我们指定了控制器“myCtrl”，它将使用范围中指定的“message2”的值。

我们可以说$rootscope对所有控制器都可用，而$scope仅对创建它的控制器可用。