AngularJS Material：使用Select Header实现复选框下拉显隐元素遇阻

我之前也踩过这个坑！你遇到的问题其实是AngularJS作用域隔离导致的——md-select-header会创建一个独立的子作用域，如果你直接把ng-model绑定到原始类型变量（比如布尔值、字符串），子作用域里的修改只会在自己的作用域内创建一个副本，根本同步不到父作用域，自然没法触发外面元素的ng-show。

正确的做法是用「对象绑定」替代原始类型绑定 #

我们可以在控制器里定义一个专门的配置对象，把复选框的状态绑定到这个对象的属性上，这样子作用域就能通过原型继承修改父作用域里的对象属性，实现状态同步。

完整代码示例 #

首先在控制器里初始化配置对象：

angular.module('myApp', ['ngMaterial'])
.controller('MyCtrl', function($scope) {
  // 用对象来存筛选配置，避免作用域隔离问题
  $scope.filterConfig = {
    showTargetElement: false
  };
  $scope.filters = [];
});

然后是HTML部分：

<md-select ng-model="filters" multiple>
  <md-select-header>
    <!-- 绑定到对象的属性，而不是原始变量 -->
    <md-checkbox ng-model="filterConfig.showTargetElement">
      显示目标元素
    </md-checkbox>
  </md-select-header>
  <md-option value="option1">选项1</md-option>
  <md-option value="option2">选项2</md-option>
  <md-option value="option3">选项3</md-option>
</md-select>

<!-- 用对象属性控制显示隐藏 -->
<div ng-show="filterConfig.showTargetElement" class="target-element">
  我是被控制显示的目标元素！
</div>

为什么这样能生效？ #

AngularJS的子作用域会继承父作用域的对象引用，当你在md-select-header的子作用域里修改filterConfig.showTargetElement时，实际上是在修改父作用域里那个对象的属性，外面的ng-show监听的也是同一个对象属性，自然就能实时响应状态变化了。

如果还是有问题，你可以打开浏览器控制台，用$scope调试工具（比如AngularJS Batarang）检查一下作用域里的变量，确认是否是作用域隔离导致的变量不同步。

内容的提问来源于stack exchange，提问作者Alexandre Aimbiré