如何为两个拼接字符串赋值并设置作用域？AngularJS菜单隐藏问题

首先明确你的场景：你有一组带ng-hide的菜单<li>，每个绑定了类似abcMenuHide、xyzMenuHide的变量，现在想在指令里通过函数动态生成并赋值这些变量对吧？

先贴出你的代码方便参考：

<ul class="sub-menu collapse"> 
  <li ng-hide="abcMenuHide" ng-click="showModal('abcMaster')"> 
    <a>Add/update listOne</a>
  </li> 
  <li ng-hide="xyzMenuHide" ng-click="showModal('xyzMaster')"> 
    <a>Add/Update listTwo</a>
  </li> 
</ul>

核心思路是利用**JavaScript对象的属性访问器（[]语法）**来动态给$scope添加变量——因为$scope本质就是一个普通对象，我们可以通过字符串拼接的变量名来设置它的属性。

具体实现步骤 #

1. 整理菜单配置（可选但推荐） #

把每个菜单的标识和对应规则整理成数组，方便后续循环处理，避免硬编码：

// 指令里定义菜单配置，对应每个li的key和模态框标识
const menuConfigs = [
  { key: 'abc', modalKey: 'abcMaster' },
  { key: 'xyz', modalKey: 'xyzMaster' },
  // 后续新增菜单直接加在这里就行
];

2. 修改你的menuListHide函数 #

在循环里拼接变量名，然后直接赋值到$scope：

$scope.menuListHide = function() {
  // 这里假设你有判断是否隐藏的数据源，比如权限数据
  // 示例：假设权限数据里，abc有权限显示（hide为false），xyz无权限（hide为true）
  const permissionData = { abc: true, xyz: false };

  // 遍历配置列表生成变量
  menuConfigs.forEach(config => {
    // 拼接ng-hide绑定的变量名：key + 'MenuHide'
    const hideVarName = `${config.key}MenuHide`;
    // 根据你的逻辑赋值：比如无权限就隐藏（设为true）
    $scope[hideVarName] = !permissionData[config.key];
    // 如果你有其他判断逻辑，直接替换右边的表达式即可
  });
};

3. 初始化调用函数 #

在指令的controller或者link函数里调用这个方法，确保页面加载时变量已经被赋值：

// 在指令的controller或link钩子中执行
$scope.menuListHide();

为什么用[]而不是.？ #

因为.语法只能访问固定名称的属性，比如$scope.abcMenuHide是硬编码，没办法动态生成变量名。而$scope[hideVarName]可以通过字符串拼接的方式，灵活创建不同的作用域变量，完美匹配你HTML里的ng-hide绑定。

优化小建议 #

如果后续菜单会频繁新增，建议把权限数据作为参数传入函数，让函数更通用：

$scope.menuListHide = function(permissionData) {
  menuConfigs.forEach(config => {
    const hideVarName = `${config.key}MenuHide`;
    $scope[hideVarName] = !permissionData[config.key];
  });
};

// 调用时传入你的权限数据
$scope.menuListHide(userPermissionInfo);

这样后续新增菜单只需要在menuConfigs里加配置，不用修改循环逻辑，维护起来更省心。

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