How to use multiple AngularJS nested / related controllers

Question

I'm trying to generate an app that has 2 diferent tabs that are shown or hidden depending on 2 buttons that are controled by angular. At the same time inside those tabs there must be some independent forms.

I'm trying to add independent controllers for those tabs but as they are "inside" the mainController, I get an error. Maybe this is not the right approach but I'm trying to figer out what is the best solution for this.

This is the code I got previously to starting adding new controllers and getting those errors (obviously the content of the tabs is simplified):

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>

Is there a way to have different controllers for those tabs? Should I discard the option of controlling the display of the tabs with angular and focus only using Angular for the tabs? Or should I have the methods for the both tabs inside the same controller?

@HamletHakobyan but notice that this is a simplified version. I don't know if it would make sense to have a directive in the final version, as it would contain a lot of form fields, methods, etc. and it wouldn't be reusable... — Vandervals
– Vandervals, Commented Aug 9, 2016 at 8:53
You can create directive that incapsulates the container of your form (i.e. tabs) and use transcusion to add diferent form into that container. — Hamlet Hakobyan
– Hamlet Hakobyan, Commented Aug 9, 2016 at 8:56

Vandervals · Accepted Answer · 2016-08-09 09:09:21Z

1

You can declare 2 controllers outside your main and then in the 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>

edited Aug 9, 2016 at 9:09

Vandervals

6,1298 gold badges54 silver badges101 bronze badges

answered Aug 9, 2016 at 8:45

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan M. CISSOKHO Over a year ago

yes indeed, you should be able to use it with "$parent" (source:fdietz.github.io/recipes-with-angular-js/controllers/…) but a better solution would be to use ui-router for instance, it's buil for this kind of nested elements

Vandervals Over a year ago

codepen.io/vandervals/pen/grQjqV I did what you suggested and it didn't work. What's wrong?

Dan M. CISSOKHO Over a year ago

just change in the ng-show "ctrl" to "$parent.ctrl"

Josh Lin · Accepted Answer · 2016-08-09 09:11:56Z

1

this case better use directive https://docs.angularjs.org/guide/directive

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

answered Aug 9, 2016 at 9:11

Josh Lin

2,44514 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to use multiple AngularJS nested / related controllers

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related