javascript - 如何使用多个 AngularJS 嵌套/相关 Controller

Question

我正在尝试生成一个应用程序，该应用程序具有 2 个不同的选项卡，这些选项卡的显示或隐藏取决于由 Angular 控制的 2 个按钮。同时这些选项卡内部必须有一些独立的表单。

我正在尝试为这些选项卡添加独立 Controller ，但由于它们位于主 Controller “内部”，因此出现错误。也许这不是正确的方法，但我正在尝试找出最好的解决方案。

这是我之前开始添加新 Controller 并获取这些错误的代码(显然选项卡的内容已简化):

var app = angular.module('myapp', [])
			.controller('MainController', mainController);

function mainController() {
	this.current_panel = "tab1";
	this.change_panel = function(new_state){
		this.current_panel = new_state;
	}
}

<div class="wrapper" ng-app="myapp" ng-controller="MainController as ctrl">
<button ng-click="ctrl.change_panel('tab1')">Tab1</button>
<button ng-click="ctrl.change_panel('tab2')">Tab2</button>

  <div class="tab1" ng-show="ctrl.current_panel == 'tab1'">
  Tab1
    <input type="text" ng-model="ctrl.txt"/>
    {{ctrl.txt}}
  </div>
  
  <div class="tab2" ng-show="ctrl.current_panel == 'tab2'">
  Tab2
    <input type="text" ng-model="ctrl.txt"/>
    {{ctrl.txt}}
  </div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

有没有办法为这些选项卡使用不同的 Controller ？我是否应该放弃使用 Angular 控制选项卡显示的选项，并仅使用选项卡的 Angular 获得焦点？或者我应该在同一 Controller 内拥有两个选项卡的方法吗？

Answer 1

您可以在 main 之外声明 2 个 Controller ，然后在 html 中声明

  <div ng-controller="tab1ctrl as ctrl" class="tab1" ng-show="$parent.ctrl.current_panel == 'tab1'" >
  Tab1
    <input type="text" ng-model="ctrl.txt"/>
    {{ctrl.txt}}
  </div>

  <div ng-controller="tab2ctrl as ctrl" class="tab2" ng-show="$parent.ctrl.current_panel == 'tab2'">
  Tab2
    <input type="text" ng-model="ctrl.txt"/>
    {{ctrl.txt}}
  </div>