我正在尝试生成一个应用程序,该应用程序具有 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 内拥有两个选项卡的方法吗?
最佳答案
您可以在 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>
关于javascript - 如何使用多个 AngularJS 嵌套/相关 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38845951/