Angularjs切换面板＆amp;子面板控件

Question

有多个面板和子面板（DIV），我需要在点击时显示其（面板）控件以执行特定任务。该项目是具有前端编辑功能的cv builder。所以关于展示/隐藏面板，我的方法非常基础，所以希望有更好的方法来完成这项工作。

以下是 HTML标记

<div class="panel component-about" ng-class="{'active': aboutPanel}" ng-click="activePanelAbout()">
  <h2 class="title">Some Title (input)</h2>
  <div class="panel-body">
    Some text (textarea)
  </div>

  <div class="panel-hover-controls">
    <a href="" ng-click="setTabRight(2)" class="btn btn-danger btn-toggle-sidebar-right" uib-tooltip="Edit"><span class="fa fa-pencil"></span></a>
    <a href="" ng-click="aboutToggle = !aboutToggle" class="btn btn-success btn-panel-settings" uib-tooltip="Settings"><span class="fa fa-cog"></span></a>
    <ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
      <li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
    </ul>
  </div>
</div>

<div class="panel component-experience" ng-class="{'active': expPanel}" ng-click="activePanelExp()">
  <h2 class="title">Some Title (input)</h2>
  <div class="panel-body">
    <ul class="panel-componenets">
      <li ng-repeat>
        Title
        Content
      </li>
    </ul>
  </div>

  <div class="panel-hover-controls">
    <a href="" ng-click="setTabRight(2)" class="btn btn-danger btn-toggle-sidebar-right" uib-tooltip="Edit"><span class="fa fa-pencil"></span></a>
    <a href="" ng-click="aboutToggle = !aboutToggle" class="btn btn-success btn-panel-settings" uib-tooltip="Settings"><span class="fa fa-cog"></span></a>
    <ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
      <li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
    </ul>
  </div>
</div>

<div class="panel component-skills" ng-class="{'active': skillsPanel}" ng-click="activePanelSkills()">
  <h2 class="title">Some Title (input)</h2>
  <div class="panel-body">
    <ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
      <li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
    </ul>
  </div>

  <div class="panel-hover-controls">
    <a href="" ng-click="setTabRight(2)" class="btn btn-danger btn-toggle-sidebar-right" uib-tooltip="Edit"><span class="fa fa-pencil"></span></a>
    <a href="" ng-click="aboutToggle = !aboutToggle" class="btn btn-success btn-panel-settings" uib-tooltip="Settings"><span class="fa fa-cog"></span></a>
    <ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
      <li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
    </ul>
  </div>
</div>

进一步请检查（下方）截图中的标记图。

参考附加截图，有多个面板部分，大多数面板也有子面板，每个面板都有自己的控件类型，需要点击显示。

这是JS（控制器）

// for setting popups
$scope.aboutToggle = false;
$scope.expToggle = false;
$scope.skillToggle = false;

// about panel
$scope.activePanelAbout = function() {
  $scope.aboutPanel = true;
  $scope.expPanel = false;
  $scope.skillPanel = false;
}

// experience panel
$scope.activePanelExp = function() {
  $scope.aboutPanel = false;
  $scope.expPanel = true;
  $scope.skillPanel = false;
}

// skill panel
$scope.activePanelSkill = function() {
  $scope.aboutPanel = false;
  $scope.expPanel = false;
  $scope.skillPanel = true;
}

现在我认为图片应该清楚。这些小组实际上正在切换，但我需要更好的方法，例如我们在 javascript / jquery中使用的this。

我希望我已经涵盖了我的问题的所有方面，如果没有，请指导我，以便我可以澄清自己。我期待着你的指导。

提前致谢。

Answer 1

AngularJS中的

this最终与普通的旧JS有点不同。由于控制器包含与控件实例化的DOM相关的自己的$scope，this并不总是引用调用函数的对象等。所以我可以想到两个选项：

首先，可以简化您为每个面板更改active课程的方式，以及它的孩子。也许只是：

$scope.activePanel = "";

$scope.ChangeActivePanel = function(newPanel) {
    $scope.activePanel = newPanel;
}

然后将每个面板的ng-class更改为ng-class="{'active': activePanel == 'about'}"或ng-class="{'active': activePanel == 'skills'}"等。然后将面板上的ng-click更改为ng-click="ChangeActivePanel('about')"或更新变量的任何内容。老实说，只需ng-click="activePanel = 'about'"即可，但可以扩展ChangeActivePanel函数以处理子面板元素的行为。只是一个想法，而不是有三个不同的功能，并切换所有这些变量。

第二个选项是为每个面板创建控制器，方法是向每个面板声明ng-controller="aboutController"或ng-controller="skillsController"，然后每个面板都有自己的$scope，但您必须声明并附加每个控制器到应用程序模块，如果你需要跨控制器共享数据，并且必须使用工厂/服务等，你会遇到麻烦。我认为这样的事情有点过头了。另外，很难管理哪个$ scope是同一视图中多个控制器的范围。

希望这能让你有所帮助。