Как использовать несколько встроенных/связанных контроллеров AngularJS

Question

Я пытаюсь создать приложение, которое имеет 2 разных вкладки, которые отображаются или скрыты в зависимости от 2 кнопок, которые управляются угловыми. В то же время внутри этих вкладок должны быть какие-то независимые формы.

Я пытаюсь добавить независимые контроллеры для этих вкладок, но поскольку они «внутри» mainController, я получаю сообщение об ошибке. Возможно, это неправильный подход, но я пытаюсь решить, что является лучшим решением для этого.

Это код, который я ранее получил начало добавления новых контроллеров и получать эти ошибки (, очевидно, содержание вкладок упрощаются):

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

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

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

Есть ли способ иметь разные контроллеры для этих вкладок? Должен ли я отказаться от возможности управления отображением вкладок с угловым и фокусом только с использованием углового для вкладок? Или у меня есть методы для обеих вкладок внутри одного контроллера?

Answer 1

Вы можете объявить 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

<directive1 ng-show="showing=='directive1'"> 
 
<directive2 ng-show="showing=='directive2'">