2.AngularJS 作用域( scope )

最新推荐文章于 2022-06-02 15:47:30 发布

置顶 hvkcoder

最新推荐文章于 2022-06-02 15:47:30 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： angularjs scope 作用域 scope的生命周期

本文链接：https://blog.youkuaiyun.com/hvkCoder/article/details/51507830

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了AngularJS中的作用域概念，包括其基本功能、生命周期等关键信息，旨在帮助开发者更好地理解作用域如何作为视图与控制器间的桥梁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用域( scope ) 是构成AngularJS应用的核心基础。应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文，$scope 对象定义应用业务逻辑、控制器方法和视图属性的地方。

在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行链接，然后应用会对DOM进行设置以便将属性变化通知给 AngularJS。

作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式，同时它也是将事件通知给另一个控制器和应用其他部分的中介。

将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中。

一、视图和 $scope 的世界

AngularJS 启动并生成视图时，会将根 ng-app 元素同 $rootScope 进行绑定。$rootScope 是所有在 $scope 对象的最上层。

$scope 对象在 AngularJS 中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水

$scope 的所有属性都可以自动被视图访问到

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 之 作用域（scope）</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
   <!-- 将 name 变量定义为本地 $scope 的一个属性  -->
    <p>Hello，{{name}}</p>
    <script type="text/javascript">
       angular.module("myApp",[])
                .run(function($rootScope){
                    $rootScope.name = "AngularJs";
                });
    </script>
</body>
</html>

运行结果：