首页 > 代码库 > AngularJS Scope(作用域)

AngularJS Scope(作用域)

2024-08-30 23:58:24   220人阅读

1.　　AngularJS Scope(作用域)

  • Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
  • Scope 是一个对象，有可用的方法和属性。
  • Scope 可应用在视图和控制器上。

2.　　使用Scope：在 AngularJS 创建控制器时，你可以将 $Scope 对象当作一个参数传递

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <style>
            input.ng-invalid{
                background-color: lightblue;
            }
        </style>
    </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>
        
        <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
    </body>
</html>

技术分享

 

3.　　Scope概述：scope 是模型。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

　　   AngularJS 应用组成如下：

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

4.　　Scope作用范围：在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。上面的例子中我们可以发现在创建控制器的时候第一个值是我们在某一个元素中 ng-controller 的属性值，如果没有匹配的元素，那么创建的控制器是没有任何作用的，而且还会出现异常。当匹配成功后，我们在js代码中设置的属性和方法就能在匹配的元素中使用，这时候$Scope的作用域就在这个匹配元素的 起始标签 和 结束标签 中。

5.　　根作用域：$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <style>
            input.ng-invalid{
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div ng-app="myApp">
            <div ng-controller="myCtrl1">
                <h1>{{carname}}</h1>
            </div>
            <p>{{name}}</p>
        </div>
    
        <script>
            var app = angular.module("myApp", []);
            app.controller(‘myCtrl1‘, function($scope, $rootScope){
                $scope.carname = ‘Volvo‘;
                $rootScope.name = ‘wgl‘
            })
        </script>
        
        <p>控制器中创建一个属性名 "carname"，只能在控制器中使用。</p>
        <p>控制器中创建一个跟作用域的属性名 "name"，可以在 ng-app 指令包含的所有 HTML 元素中使用。</p>
    </body>
</html>

技术分享

 

AngularJS Scope(作用域)


联系
我们