上一节:
下一节:

  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>
    尝试一下
上一节:
下一节: