declare one controller for each tab

Issue

I’m using tabs in an html page and I’m trying to declare one controller for each tab.

<div class="tab-content">
    <div class="tab-pane active" id="customerInfo">
        @customerList()
    </div>
    <div class="tab-pane" id="communities">
        @communityList()
</div>

For the first tab I declare my controller in “customerList” like this :

<div class="block full" ng-controller="customerCtrl">

and I tried the same thing with the second tab but it didn’t work. Any help please.

Solution

This is possible and judging from here you can do this as simple as:

<body ng-app="">
<div class="tab-content">
    <div class="tab-pane active" id="customerInfo" ng-controller="customerListcontroller">
        @customerList()
    </div>
    <div class="tab-pane" id="communities" ng-controller="communityListcontroller">
        @communityList()
    </div>
</div>
</body>

There are few things you might be doing wrong:

  • forget to put ng-app=”app” to wrap your controllers
  • From the question there is a div omission. Make sure this is not the case in the code
  • Not defining your controllers properly.
  • Not calling the file containing the controller in the HTML file

It should be a minor fix. You can also take a look at this.

Answered By – Coding Enthusiast

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.