javascript - Failed initializing html tab with server data -
i creating html page 2 tabs. when click on tab 1, loads table data 1. when click on tab 2, loads table data 2. tab 1 working expected. however, when click on tab 2, data isn't loaded. controllers identical. difference?
here relevant html code. tab id "tabledata" loads data , tab 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 correlationsctrl. init() 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 not invoked. why? $scope.init(); }); here controller 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 invoked on page load. why work , other doesn't? $scope.init(); }); here 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 $index"> <td data-ng-repeat="header in headers">{{ record.data[header] }}</td> </tr> </tbody> </table>
in html declare data-ng-controller="fooctrl" have no controller fooctrl. no need declare 2 different module 2 tabs can declare 2 controller 2 tabs in same module.
like:
var app = angular.module('myapp',[]); app.controller('correlationsctrl', function ($scope, $http) { $scope.init = function () { // code }; $scope.init(); }).controller('journalctrl', function ($scope, $http) { $scope.init = function () { // code }; $scope.init(); }); so use ng-app = "myapp" in root element <html ng-app="myapp"> or <body ng-app="myapp"> , use data-ng-controller in 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 2 tabs show data 2 different controllers.
Comments
Post a Comment