AngularJS——2、作用域Scope_angularjs2 scope模型-优快云博客

本文链接：https://blog.youkuaiyun.com/AFencounter/article/details/103457189

本文深入解析AngularJS应用的组成，包括视图、模型和控制器的基本概念。通过实例演示了如何在HTML中使用{{}

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

AngularJS 应用组成：

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

<!-- 通用部分 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">    
    </head>
    <body>
        ......
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        ......
    </body>
</html>

作用域 Scope

一个对象，有可用的方法和属性，应用于 HTML和 JavaScript，是二者联系的纽带。（可将$scope当做参数传递）

1、

<!--控制器(JavaScript)中创建一个属性名"name"，对应视图(HTML)中{{ }}里的名称。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
    <h2>{{name}}</h2>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.name = "Evan Lee";
    });
</script>

输出：

2、

<!--修改输入框中的值，会影响到模型，以及控制器对应的属性值。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
    <input ng-model="name">
    <h2>姓名是 {{name}}</h2>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.name = "Evan Lee";
    });
</script>

输出：

根作用域 rootScope

作用于整个应用，是各 controller 中 scope 的桥梁。

用 rootScope 定义的值，可以在各 controller 中使用。

<!--$rootScope 在循环对象内外都可以访问。-->
<div ng-app="xxApp" ng-controller="xxCtrl">
    <h3>{{fans}}</h3>
    <ul>
        <li ng-repeat="x in names">{{x}} {{fans}}</li>
    </ul>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope, $rootScope) {
        $scope.names = ["YY", "FF", "LL"];
        $rootScope.fans = "Bee";
    });
</script>

输出：