Question

我试图生成一个应用程序，该应用程序具有2个不同的选项卡，这些选项卡显示或隐藏，具体取决于由角度控制的2个按钮。同时在这些标签内必须有一些独立的表格。

我试图为这些标签添加独立控制器，但因为它们是＆＃34;内部＆＃34; mainController，我收到一个错误。也许这不是正确的方法，但我试图弄清楚什么是最好的解决方案。

这是我之前开始添加新控制器并获取这些错误的代码（显然，标签的内容已经简化）：

＆＃13;

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;
	}
}

＆＃13;

<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>

＆＃13;

有没有办法为这些标签设置不同的控制器？我是否应该放弃使用角度来控制标签显示的选项，并且仅使用Angular作为标签？或者我应该在同一个控制器中使用两个选项卡的方法吗？

Answer 1

您可以在main之外声明2个控制器，然后在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>

Answer 2

这种情况更好地使用指令https://docs.angularjs.org/guide/directive

＆＃13;

core

＆＃13;

如何使用多个AngularJS嵌套/相关控制器

2 个答案: