一、AngularJS作用域核心概念

在AngularJS框架中，作用域(Scope)是连接控制器(Controller)与视图(View)的关键桥梁。它是表达式的执行环境，具有以下核心特性：

1. 作用域层级结构

AngularJS通过原型继承建立作用域层级：

• 根作用域($rootScope) - 所有作用域的顶层对象
• 控制器作用域 - 通过控制器创建，继承$rootScope
• 指令隔离作用域 - 可创建独立作用域避免污染

2. 双向数据绑定

作用域通过$watch机制实现模型-视图自动同步：

// 控制器中
$scope.user = { name: 'John' };

// HTML视图
<input type="text" ng-model="user.name">

3. 事件传播系统

作用域支持事件冒泡($emit)和广播($broadcast)：

// 子作用域向上发送事件
$scope.$emit('updateEvent', data);

// 父作用域向下广播事件
$scope.$broadcast('refreshEvent', data);

二、实战示例代码

1. 基础作用域绑定

<div ng-controller="MainController">
  <h2>{{ title }}</h2>
  <input ng-model="searchText">
</div>

<script>
angular.module('app', [])
  .controller('MainController', function($scope) {
    $scope.title = "阿里云国际站服务";
    $scope.searchText = "";
  });
</script>

2. 嵌套作用域继承

<div ng-controller="ParentController">
  父级: {{ cloudService }} 
  <div ng-controller="ChildController">
    子级继承: {{ cloudService }} 
  </div>
</div>

<script>
  .controller('ParentController', function($scope) {
    $scope.cloudService = "ECS云服务器";
  })
  .controller('ChildController', function($scope) {
    // 自动继承父作用域的cloudService属性
  });
</script>

3. 隔离作用域指令

<payment-card service="'阿里云国际站'"></payment-card>

<script>
.directive('paymentCard', function() {
  return {
    scope: { service: '@' }, // 隔离作用域
    template: '<div class="card">{{service}}充值通道</div>'
  };
});
</script>

三、阿里云国际站充值优势