HoRain云--AngularJS Scope(作用域)

发布时间:2026/9/7 9:38:32
HoRain云--AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象有可用的方法和属性。Scope 可应用在视图和控制器上。如何使用 Scope当你在 AngularJS 创建控制器时你可以将$scope对象当作一个参数传递:AngularJS 实例控制器中的属性对应了视图上的属性div ng-appmyApp ng-controllermyCtrlh1{{carname}}/h1/divscriptvar app angular.module(myApp, []);app.controller(myCtrl, function($scope) {$scope.carname Volvo;});/script尝试一下 »当在控制器中添加$scope对象时视图 (HTML) 可以获取了这些属性。视图中你不需要添加$scope前缀, 只需要添加属性名即可如{{carname}}。Scope 概述AngularJS 应用组成如下View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数可以添加或修改属性。scope 是模型。scope 是一个 JavaScript 对象带有属性和方法这些属性和方法可以在视图和控制器中使用。AngularJS 实例如果你修改了视图模型和控制器也会相应更新div ng-appmyApp ng-controllermyCtrl input ng-modelname h1{{greeting}}/h1 button ng-clicksayHello()点我/button /div scriptvar app angular.module(myApp, []); app.controller(myCtrl, function($scope) { $scope.name Runoob; $scope.sayHello function() { $scope.greeting Hello $scope.name !; }; });/script尝试一下 »Scope 作用范围了解你当前使用的 scope 是非常重要的。在以上两个实例中只有一个作用域 scope所以处理起来比较简单但在大型项目中 HTML DOM 中有多个作用域这时你就需要知道你使用的 scope 对应的作用域是哪一个。AngularJS 实例当我们使用ng-repeat指令时每个重复项都访问了当前的重复对象:div ng-appmyApp ng-controllermyCtrlulli ng-repeatx in names{{x}}/li/ul/divscriptvar app angular.module(myApp, []);app.controller(myCtrl, function($scope) {$scope.names [Emil, Tobias, Linus];});/script尝试一下 »每个li元素可以访问当前的重复对象这里对应的是一个字符串 并使用变量x表示。根作用域所有的应用都有一个$rootScope它可以作用在ng-app指令包含的所有 HTML 元素中。$rootScope可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值可以在各个 controller 中使用。AngularJS 实例创建控制器时将 $rootScope 作为参数传递可在应用中使用div ng-appmyApp ng-controllermyCtrlh1{{lastname}} 家族成员:/h1ulli ng-repeatx in names{{x}} {{lastname}}/li/ul/divscriptvar app angular.module(myApp, []);app.controller(myCtrl, function($scope, $rootScope) {$scope.names [Emil, Tobias, Linus];$rootScope.lastname Refsnes;});/script尝试一下 »