javascript - 动态访问方法中的 Controller 变量

Question

我有一个 Angular Controller ，其中有一个巨大的表格拆分成卡片。因此，每次用户选择标题时，该部分的卡片都会显示(例如姓名部分、地址部分、联系数据、大学数据、工作数据等)。

只有两个部分的相关代码是这样的:

angular.module('controllers', [])
.controller('EditUserController', function($scope, $state) {

  $scope.mustShowName = false;
  $scope.mustShowContact = false;

  $scope.toogleShowContact = function() {
    if ($scope.mustShowContact) {
      $scope.mustShowContact = false;
    } else {
      $scope.mustShowContact = true;
    }
  };
  $scope.toogleShowName = function() {
    if ($scope.mustShowName) {
      $scope.mustShowName = false;
    } else {
      $scope.mustShowName = true;
    }
  };
});

但是有各种各样的卡片。有一种重构方法是这样的吗？:

$scope.toogleSection = function(section) {
  if (section) {
    section = false;
  } else {
    section = true;
  }
};

...

$scope.toogleSection($scope.mustShowName);

如果我尝试它，它不起作用并且不会抛出错误，所以我认为它只是复制变量而不是引用原始变量。

Answer 1

当您请求 $scope.mustShowName 时，您只是获取值而不是属性的引用 - 即 true 或 false。而是将部分名称作为字符串传递，并使用该名称引用范围内的属性。

顺便说一句 - 一个更好的主意是创建一个封装行为的指令，并帮助您保持 DRY .

$scope.toogleSection = function(sectionName) {
  if ($scope[sectionName]) {
    $scope[sectionName] = false;
  } else {
    $scope[sectionName] = true;
  }
};

$scope.toogleSection('toogleShowName');