什么是$scope和$rootScope

什么是scope和rootScope

$scope是一个JavaScript对象,指的是应用程序的数据。它有属性和方法,对视图和控制器都可用。因此,我们可以说scope是HTML视图和JavaScript控制器之间的绑定部分。scope拥有所有需要在视图中显示的模型数据。

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

步骤:

  • 在制作控制器时,将$scope对象作为一个参数传递。
     app.controller("myCrtl",function($scope){});
  • 在控制器内为$scope对象添加属性。
     app.controller("myCrtl",function(scope){scope.name="GeeksforGeeks";
    });

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

         <p> Name: {{name}}</p>

例子1:了解范围的工作。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>{{title}}</h1>
    <label>Enter a number:</label>
    <input type="number" min=0 ng-model="a">
    <br><br>
    <label>Enter a number:</label>
    <input type="number" min=0 ng-model="b">
    <br><br>
    <button type="button" ng-click="add()">
        Add
    </button>
    <p>Answer: {{answer}}</p>
    <script type="text/javascript">
        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;
            };
        });
    </script>
</body>
  
</html>

输出:

什么是$scope和$rootScope ?

示例 1

解释:在这个例子中,在控制器 “myCtrl “的范围中添加了各种属性。当你在作用域中添加一个属性时,视图就可以访问这些属性。在作用域中创建的 “title “属性在视图中使用{{}}被访问。同样地,当你从视图中改变一个属性的值时,它也反映在作用域中。变量’a’、’b’和’answer’的值最初是0。当用户输入两个数字并点击 “添加 “按钮时,’a’、’b’和’answer’的值发生变化,并再次反映在视图中。

实例2:用字符串、对象、函数进行范围工作

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

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>{{title}}</h1>
    <form>
        <label>Enter first name: </label>
        <input type="text" ng-model="firstname">
        <br><br>
        <label>Enter last name: </label>
        <input type="text" ng-model="lastname">
    </form>
    <p>Name: {{name()}}</p>
  
    <p>Courses:</p>
  
    <ul ng-repeat="x in subjects.courses">
        <li>{{x}}</li>
    </ul>
    <p>Tutorials:</p>
  
    <ul ng-repeat="y in subjects.tutorials">
        <li>{{y}}</li>
    </ul>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function (scope) {
            scope.title = "GeeksforGeeks";
            scope.firstname = "";
            scope.lastname = "";
            scope.name = function () {
                returnscope.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"],
            };
        })
    </script>
</body>
  
</html>

输出:

什么是$scope和$rootScope ?

示例 2

AngularJS中的作用域在本质上是分层的:$rootScope作为一个全局变量。AngularJS应用程序的所有scopes都是rootscope的子女。一个应用程序只能有一个$rootScope。它是在包含ng-app指令的HTML元素上创建的作用域,在整个应用中都是可用的。

例子3:了解scope和rootScope的工作。

在这个例子中,加载应用程序时,创建了一个名为message1的属性,属于rootScope。我们还创建了一个名为 “myCtrl “的控制器,并在该范围内添加了一个属性message2。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <p>Message: {{message1}}</p>
  
    <div ng-controller="myCtrl">
        <p>Message: {{message1}}</p>
        <p>Message: {{message2}}</p>
        <p>Message: {{message4}}</p>
    </div>
    <script type="text/javascript">
        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."
        });
    </script>
</body>
  
</html>

输出:

什么是$scope和$rootScope ?

示例 3

解释:你可以在上面的例子中看到,属于rootScope的属性对所有的控制器都是可用的。因此,我们可以打印属于rootScope的 “message1 “在 <div>元素,其中控制器 “myCtrl “被指定为rootScope,在整个应用程序中可用。

而 “message2 “在rootScope和范围中都被指定。当变量名称在范围和rootScope中相同时,应用程序会使用当前范围中的变量。因为在 <div>标签,我们已经指定了控制器 “myCtrl”,它将使用范围中指定的 “message2 “的值。

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程