Failed initializing html tab with server data

Question

I am creating an html page with two tabs. When you click on tab 1, it loads table data 1. When you click on tab 2, it loads table data 2. Tab 1 is working as expected. However, when I click on tab 2, the data isn't loaded. The controllers are identical. What is the difference?

Here is the relevant html code. tab with id "tableData" loads with data and tab with id "correlations" doesn't load.

        <div>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"><a href="#tableData" aria-controls="tableData" role="tab" data-toggle="tab">Table Data</a></li>
                <li role="presentation"><a href="#correlations" aria-controls="correlations" role="tab" data-toggle="tab">Correlations</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tableData">
                    <h2 class="sub-header">Health Data</h2>
                    <div class="table-responsive" data-ng-app="myApp" data-ng-controller="journalCtrl">
                        <div data-ng-include="'screens/tablescreen.html'"></div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="correlations">
                    <h2 class="sub-header">Correlations Data</h2>
                    <div class="table-responsive" data-ng-app="correlationsApp" data-ng-controller="correlationsCtrl">
                        <div data-ng-include="'screens/tablescreen.html'"></div>
                    </div>
                </div>
            </div>
        </div>

Here is my correlationsCtrl. init() is never invoked. Why?:

var correlationsApp = angular.module('correlationsApp', []);

correlationsApp.controller('correlationsCtrl', function ($scope, $http) {
    $scope.init = function () {
        $http.get("https://localhost:4567/foo/1/correlations")
            .then(function (response) {
            var json = response.data.records;
            $scope.records = json;
            $scope.headers = response.data.headers;
        });
    };

    //This is not invoked.  Why?
    $scope.init();
});

Here is my controller which does get invoked:

var app = angular.module('myApp', []);
app.controller('journalCtrl', function ($scope, $http) {

    $scope.init = function () {
        $http.get("https://localhost:4567/journal/1")
            .then(function (response) {
            var json = response.data.records;
            $scope.records = json;
            $scope.headers = response.data.headers;
        });
    };

    //This is invoked on page load.  Why does this work and the other doesn't?
    $scope.init();
});

Here is the html table:

<table class="table table-striped">
    <thead>
    <tr>
        <th data-ng-repeat="header in headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
    <tr data-ng-repeat="record in records track by $index">
        <td data-ng-repeat="header in headers">{{ record.data[header] }}</td>
    </tr>
    </tbody>
</table>

you may get help from this link http://stackoverflow.com/questions/20603869/ng-init-via-function — Shaishab Roy, Feb 05 '16 at 15:09
I have updated my question, removing ng-init since I don't think I need it. I should be able to init right within my controller ... this works for tab 1 but not tab 2. Not sure why - they seem identical. — thebiggestlebowski, Feb 05 '16 at 16:34

score 1 · Accepted Answer · answered Feb 05 '16 at 18:40

1

In html you declare data-ng-controller="fooCtrl" but you have no controller fooCtrl. No need to declare two different module for two tabs you can declare two controller for two tabs in same module.

like:

var app = angular.module('myApp',[]);

app.controller('correlationsCtrl', function ($scope, $http) {
    $scope.init = function () {
        // your code
    };
    $scope.init();
}).controller('journalCtrl', function ($scope, $http) {

    $scope.init = function () {
       // your code
    };
    $scope.init();
});

so you use ng-app = "myApp" in root element like <html ng-app="myApp"> or <body ng-app="myApp"> and use only data-ng-controller in your tab page.

<div class="table-responsive" data-ng-controller="journalCtrl">
    <div data-ng-include="'screens/tablescreen.html'"></div>
 </div>

and

<div class="table-responsive" data-ng-controller="correlationsCtrl">
        <div data-ng-include="'screens/tablescreen.html'"></div>
</div>

See PLUNKER DEMO two tabs show data from two different controllers.

answered Feb 05 '16 at 18:40

Shaishab Roy

16,335
7
50
68

That was a mistake in my example, but I don't have that problem in my "real" code. The problem unfortunately is not this. I have fixed the stackoverflow question - sorry I got it wrong the first time. – thebiggestlebowski Feb 05 '16 at 20:10
No, I have not solved the problem. Still don't know why correlationCtrl.init() is never invoked. – thebiggestlebowski Feb 06 '16 at 21:12
can you try like plunker demo? – Shaishab Roy Feb 07 '16 at 06:20
Your code example on Plunker worked fine. I refactored my code to use only one app containing 2 controllers. It now works. Thanks for taking the time to make a clear plunker example. Very helpful! – thebiggestlebowski Feb 08 '16 at 22:46

Failed initializing html tab with server data

1 Answers1