什么是 $scope？

$scope 是一个指向应用数据的 JavaScript 对象。它附加了各种属性和方法，这些内容对于视图和控制器来说都是可用的。因此，我们可以说 $scope 是 HTML 视图与 JavaScript 控制器之间的纽带。$scope 拥有视图显示所需的所有模型数据。

AngularJS 是一个基于 MVC 的框架。MVC 代表 Model View Controller（模型-视图-控制器）。MVC 用于将应用逻辑与用户界面层隔离开来。模型负责维护应用数据，视图负责向用户展示数据，而控制器是软件代码，负责协调模型与视图之间的交互。作用域就是模型。

方法

让我们通过以下步骤来理解它：

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

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

• 在控制器内部向 $scope 对象添加属性。

app.controller("myCrtl", function($scope){
    $scope.name = "极客教程";
});

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

在这个例子中，我们将看到如何在视图中使用作用域的属性和方法。

HTML

    
    



    
{{title}}
    输入一个数字：
    
    


    输入另一个数字：
    
    


    
        相加
    
    
结果: {{answer}}
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.a = 0;
            $scope.b = 0;
            $scope.answer = 0;
            $scope.title = "极客教程";
            $scope.add = function () {
                $scope.answer = $scope.a + $scope.b;
            };
        });
    

输出

!image

解释：

在这个示例中，我们在控制器 “myCtrl” 中向作用域添加了各种属性。当你向作用域添加一个属性时，视图就能访问这些属性。在作用域中创建的 “title” 属性，在视图中通过 {{}} 进行访问。同样，当你在视图中更改属性的值时，它也会反映在作用域中。变量 ‘a’、’b’ 和 ‘answer’ 的值最初都是 0。当用户输入两个数字并点击 “相加” 按钮时，’a’、’b’ 和 ‘answer’ 的值发生变化，并再次反映在视图中。

示例 2：作用域与字符串、对象、函数的配合使用

在这个例子中，我们在脚本中创建了一个名为 “myApp” 的模块。我们给该模块添加了一个名为 “myCtrl” 的控制器。在控制器中，我们向 $scope 添加了诸如字符串、函数、对象之类的属性。这些属性的值在视图中显示出来。

HTML

    
    



    
{{title}}
    
        输入名： 
        
        


        输入姓： 
        
    
    
全名: {{name()}}

    
课程列表:

    

        
{{x}}
    
    
教程列表:

    

        
{{y}}
    
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.title = "极客教程";
            $scope.firstname = "";
            $scope.lastname = "";
            $scope.name = function () {
                return $scope.firstname +
                  " " +
                  $scope.lastname;
            };
            $scope.subjects = {
                courses: ["直播课程",
                    "自学课程",
                    "学校课程"],
                tutorials: ["练习 DS 和 算法",
                    "算法",
                    "数据结构",
                    "软件设计",
                    "计算机科目"],
            };
        })
    

输出

!image

作用域的层级与 $rootScope

AngularJS 中的作用域本质上是分层级的。$rootScope 的行为类似于一个全局变量。AngularJS 应用中所有的 $scope 都是 $rootscope 的子级。一个应用只能有 一个 $rootScope。这是在包含 ng-app 指令的 HTML 元素上创建的作用域。