一、AngularJS作用域核心概念

在AngularJS框架中，作用域(Scope)是連接控制器(Controller)與視圖(View)的關(guān)鍵橋梁。它是表達(dá)式的執(zhí)行環(huán)境，具有以下核心特性：

1. 作用域?qū)蛹?jí)結(jié)構(gòu)

AngularJS通過(guò)原型繼承建立作用域?qū)蛹?jí)：

• 根作用域($rootScope) - 所有作用域的頂層對(duì)象
• 控制器作用域 - 通過(guò)控制器創(chuàng)建，繼承$rootScope
• 指令隔離作用域 - 可創(chuàng)建獨(dú)立作用域避免污染

2. 雙向數(shù)據(jù)綁定

作用域通過(guò)$watch機(jī)制實(shí)現(xiàn)模型-視圖自動(dòng)同步：

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

// HTML視圖
<input type="text" ng-model="user.name">

3. 事件傳播系統(tǒng)

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

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

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

二、實(shí)戰(zhàn)示例代碼

1. 基礎(chǔ)作用域綁定

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

<script>
angular.module('app', [])
  .controller('MainController', function($scope) {
    $scope.title = "阿里云

<div ng-controller="ParentController">
  父級(jí): {{ cloudService }} 
  <div ng-controller="ChildController">
    子級(jí)繼承: {{ cloudService }} 
  </div>
</div>

<script>
  .controller('ParentController', function($scope) {
    $scope.cloudService = "ECS云

<payment-card service="'