AngularJS Scope(作用域)



  • Scope 定义

    scope(作用域) 是HTML(视图)和JavaScript(控制器)之间的绑定部分。
    scope(作用域) 是具有可用属性和方法的对象。
    scope(作用域) 可用于视图和控制器。
  • 如何去使用 Scope

    在AngularJS中创建控制器时,会将 $scope 对象作为参数传递:
    可以在视图中引用在控制器中创建的属性:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp" ng-controller="myCtrl">
          <h1>{{ carname }}</h1>
      </div> 
      <script>
          var app = angular.module('myApp', []);
          app.controller('myCtrl', function($scope) {
             $scope.carname = "Volvo";
          });
      </script>
    </body>
    </html>
    
    将属性添加到控制器中的 $scope 对象时,视图(HTML)可以访问这些属性。
    在视图中,您无需使用前缀 $scope,而只是引用属性名称,例如{{carname}}。
  • Scope 概述

    如果我们认为AngularJS应用程序包含:
    • View(视图),即HTML。
    • Model(模型),这是当前视图可用的数据。
    • Controller(控制器),它是制作/更改/删除/控制数据的JavaScript函数。
    • 那么scope(作用域)就是模型。
    scope(作用域) 是具有属性和方法的JavaScript对象,这些属性和方法可用于视图和控制器。
    如果您在视图中进行更改,则模型和控制器将被更新:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="name"><br>
           <h1>我的姓名:{{ name }}</h1>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
               $scope.name = "John Doe";
            });
        </script>
    </body>
    </html>
    
  • Scope 作用范围

    了解要处理的 Scope 非常重要。
    在上面的两个示例中,只有一个作用域,因此知道您的作用域不是问题,但是对于较大的应用程序,HTML DOM中可以有一些部分只能访问某些作用域。
    在处理 ng-repeat 指令时,每个重复都可以访问当前的重复对象:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
          <ul>
            <li ng-repeat="x in names">
              {{ x }}
            </li>
          </ul>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
               $scope.names = ["Emil", "Tobias", "Linus"];
            });
        </script>
    </body>
    </html>
    
    每个<li>元素都可以访问当前的重复对象,在这种情况下为字符串,可以使用x进行引用。
  • 根作用域

    所有应用程序都有一个 $rootScope,这是在包含 ng-app 指令的HTML元素上创建的范围。
    $rootScope 在整个应用程序中可用。
    如果变量在当前作用域和 $rootScope 中都具有相同的名称,则应用程序将在当前作用域中使用该名称。
    控制器的作用域和 $rootScope 中都存在一个名为 "color" 的变量:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <p>rootScope最喜欢的颜色:</p>
        <h1>{{color}}</h1>
    
        <div ng-controller="myCtrl">
        <p>控制器喜欢的颜色范围:</p>
        <h1>{{color}}</h1>
        </div>
    
        <p>rootScope最喜欢的颜色仍然是:</p>
        <h1>{{color}}</h1>
        <script>
            var app = angular.module('myApp', []);
            app.run(function($rootScope) {
                $rootScope.color = 'blue';
            });
            app.controller('myCtrl', function($scope) {
                $scope.color = "red";
            });
        </script>
    </body>
    </html>