如何在父元素中修改带有ng-click指令的子元素内的变量？

这个问题其实是AngularJS作用域继承机制导致的典型问题——你当前的代码里，点击父元素的section时设置的activeSection是父作用域的变量，但点击子元素的CLOSE按钮时，子作用域会新建一个同名的局部变量，而不是修改父作用域里的那个，所以状态不会同步更新。下面给你几种可行的解决方案，按推荐程度排序：

1. 使用对象属性存储状态（推荐方案） #

AngularJS的作用域继承基于原型链，如果你用对象来包裹变量，子作用域会继承父作用域的对象引用，修改对象属性时就会直接作用于父作用域的对象，不会新建局部变量。

修改你的代码如下：

<section class="page-section about-us" scroll-bookmark="about-us" ng-click="sectionState.activeSection=true" ng-init="sectionState={activeSection:false}">
  <div class="page-content sub-content active-section">{{sectionState.activeSection}}
    <div class="page-border">
      <a href="#" class="close-section">
        <img src="public/images/go-back-icon.png" />
        <div class="back-button" ng-click="sectionState.activeSection=false">CLOSE</div>
      </a>
    </div>
  </div>
</section>

这里我们把activeSection放到了sectionState对象里，不管父元素还是子元素的ng-click操作的都是同一个对象的属性，状态就能正确同步了。

2. 使用$parent直接访问父作用域变量（不推荐，耦合性高） #

如果只是临时快速解决，你可以在子元素的ng-click里用$parent直接指向父作用域的变量：

<div class="back-button" ng-click="$parent.activeSection=false">CLOSE</div>

但这种方式不推荐，因为它强依赖DOM的层级结构——如果后续你的DOM嵌套关系变化，子元素的作用域层级改变，$parent可能就不再指向原来的父作用域了，代码会变得脆弱。

3. 把状态管理放到控制器中（最佳实践，适合复杂场景） #

如果你的页面有对应的控制器，更推荐把状态和操作逻辑都放到控制器里，这更符合AngularJS的MVC思想，代码也更易维护：

控制器代码： #

angular.module('yourAppName').controller('AboutSectionController', function($scope) {
  // 用对象存储状态
  $scope.sectionState = {
    activeSection: false
  };

  // 封装打开/关闭的方法
  $scope.openSection = function() {
    $scope.sectionState.activeSection = true;
  };

  $scope.closeSection = function() {
    $scope.sectionState.activeSection = false;
  };
});

对应HTML代码： #

<section class="page-section about-us" scroll-bookmark="about-us" ng-controller="AboutSectionController" ng-click="openSection()">
  <div class="page-content sub-content active-section">{{sectionState.activeSection}}
    <div class="page-border">
      <a href="#" class="close-section">
        <img src="public/images/go-back-icon.png" />
        <div class="back-button" ng-click="closeSection()">CLOSE</div>
      </a>
    </div>
  </div>
</section>

这种方式把状态和逻辑从视图中抽离出来，不仅避免了作用域继承的问题，也让代码更易测试和扩展。

内容的提问来源于stack exchange，提问作者Artvader