📜  什么是 $scope 和 $rootScope ?

📅  最后修改于: 2022-05-13 01:56:34.241000             🧑  作者: Mango

什么是 $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}}

              

              

         

Answer: {{answer}}

       


HTML


  

    

  

    

{{title}}

    
                          

                      
    

Name: {{name()}}

       

Courses:

       
            
  • {{x}}
  •     
    

Tutorials:

       
            
  • {{y}}
  •     
       


HTML


  

    

  

    

Message: {{message1}}

       
        

Message: {{message1}}

        

Message: {{message2}}

        

Message: {{message4}}

    
       


输出:

示例 1

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

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

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

HTML



  

    

  

    

{{title}}

    
                          

                      
    

Name: {{name()}}

       

Courses:

       
            
  • {{x}}
  •     
    

Tutorials:

       
            
  • {{y}}
  •     
       

输出:

示例 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}}

    
       

输出:

示例 3

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

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

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

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

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